/*
 * lp-top.css — トップ（index.html）の LP と登録画面のヘッダー・フッター（デザイナー版・L4b 2026-09-28）
 * 元: baton-LP_TOP_designer/style.css。tools で機械変換：
 *   変数 --x → --lpt-x／:root → body.lp-chrome／body → body.lp-page／
 *   素の要素（* img a p h1-3 ul figure）→ :where(body.lp-chrome .lpt) の中だけ（詳細度は上げない）／クラス → body.lp-chrome を前に付ける
 * index.html は 1 枚の SPA（LP・登録・ツール画面が同居）なので、登録以降の画面を崩さないよう閉じている。
 */

/* ---- L4b の足し：style.css の既存規則との衝突をここで止める（デザイナーの規則より前に置く） ---- */
html[data-seller="personal"] { --lpt-main: #2f5d8a; }                 /* 個人 LP は藍。茶は使わない */
body.lp-chrome .brand__seller,
body.lp-chrome .brand-seller { display: none; }
html[data-seller="personal"] body.lp-chrome .brand__seller,
html[data-seller="personal"] body.lp-chrome .brand-seller { display: inline-block; }
body.lp-chrome .top { display: none; }                                   /* LP・登録では今のヘッダーを隠す（id はそのまま） */
body:not(.lp-chrome) .lpt.site-header,
body:not(.lp-chrome) .lpt.menu-overlay { display: none; }                 /* ツール画面では新ヘッダーを出さない */
body.lp-chrome:not(.lp-page) .lpt.site-header { background: var(--lpt-main); } /* 登録画面：背景が白なのでヘッダーは黄 */
body.lp-page .site-header.lpt { background: #fff; } /* LP だけ白。登録と他ページは黄 */
body.lp-chrome:has(#key-banner[data-payment-state]:not([hidden])) .lpt.site-header { position: relative; } /* 購入確認の題を覆わない */
:where(body.lp-chrome .lpt) img { height: auto; }                        /* width/height 属性で縦横比が崩れないように */
:where(body.lp-chrome .lpt) h3 { font-size: revert; font-weight: revert; } /* style.css の素の h3 を打ち消す */
body.lp-chrome .hero { display: block; gap: normal; padding: 0; grid-template-columns: none; } /* style.css の旧 .hero を打ち消す */
body.lp-chrome .site-header .brand { font: inherit; letter-spacing: normal; }                 /* style.css の .brand を打ち消す */
body.lp-chrome .lpt button.button { border: 0; padding: 0; font-family: inherit; }            /* 登録ボタンは <button> */
body.lp-chrome .price { font-size: 20px; font-weight: 500; line-height: 1.5; }                 /* 税別・税込の字（span 無しで書く） */

/* ---- ここからデザイナーの規則（変換のみ） ---- */

:where(body.lp-chrome .lpt),
:where(body.lp-chrome .lpt) *,
:where(body.lp-chrome .lpt) *::before,
:where(body.lp-chrome .lpt) *::after {
  box-sizing: border-box;
}

html:has(body.lp-page) {
  scroll-behavior: smooth;
}

body.lp-page {
  margin: 0;
  color: var(--lpt-black);
  background: linear-gradient(to bottom, var(--lpt-main) 0 120px, var(--lpt-bg) 120px 100%);
  font-family: var(--lpt-font-ja);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

:where(body.lp-chrome .lpt) img {
  display: block;
}

:where(body.lp-chrome .lpt) a,
:where(body.lp-chrome .lpt) a:hover {
  color: inherit;
  text-decoration: none;
}

:where(body.lp-chrome .lpt) p,
:where(body.lp-chrome .lpt) h1,
:where(body.lp-chrome .lpt) h2,
:where(body.lp-chrome .lpt) h3,
:where(body.lp-chrome .lpt) ul,
:where(body.lp-chrome .lpt) figure {
  margin: 0;
}

:where(body.lp-chrome .lpt) ul {
  padding: 0;
  list-style: none;
}

body.lp-chrome .container {
  width: min(1200px, calc(100% - 80px));
  margin-inline: auto;
}


body.lp-chrome .hero {
  position: relative;
  z-index: 9;
  overflow: hidden;
  background: var(--lpt-main);
}

body.lp-chrome .hero__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: min(1690px, 100%);
  margin-inline: auto;
  padding: 200px 0 120px;
}

body.lp-chrome .hero__visual {
  position: relative;
  z-index: 0;
  flex: 0 0 min(45.657vw, 771.6px);
  height: 408.24px;
}

body.lp-chrome .hero__visual > img {
  position: absolute;
  top: 0;
  left: min(0px, calc((1690px - 100vw) / 2));
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.lp-chrome .hero__circle {
  position: absolute;
  top: -81.25px;
  right: -98.4px;
  width: 354px;
  height: 354px;
  border-radius: 50%;
  background: #fff;
}

body.lp-chrome .hero__content,
body.lp-chrome .hero__heading,
body.lp-chrome .hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.lp-chrome .hero__content {
  position: relative;
  z-index: 1;
  flex: 0 0 680px;
  gap: 56px;
}

body.lp-chrome .hero__heading {
  gap: 24px;
}

body.lp-chrome .hero h1 {
  width: 680px;
  height: 191px;
}

body.lp-chrome .hero h1 img {
  width: 100%;
  height: auto;
}
body.lp-chrome .hero h1 img[data-lp="personal"] {
  filter: drop-shadow(2px 0 0 #222) drop-shadow(-2px 0 0 #222) drop-shadow(0 2px 0 #222) drop-shadow(0 -2px 0 #222);
}

body.lp-chrome .hero__copy {
  gap: 24px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

body.lp-chrome .hero__copy > p:not(.hero__lead) {
  max-width: 36em;
  margin: 0;
  line-height: 1.6;
}

body.lp-chrome .hero__lead {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

body.lp-chrome .button-row {
  display: flex;
  gap: 20px;
}

body.lp-chrome .hero__count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-sizing: border-box;
  width: 620px;
  max-width: 100%;
  margin-top: 20px;
  padding: 16px 20px 16px 24px;
  border: 1.5px solid var(--lpt-black);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(23, 32, 27, 0.1);
}

body.lp-chrome .hero__count-text {
  min-width: 0;
}

body.lp-chrome .hero__count-lead {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

body.lp-chrome .hero__count-sub {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lpt-text-sub, #5a6472);
}

body.lp-chrome .button--secondary.hero__count-button {
  flex: none;
  width: auto;
  height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 16px;
  white-space: nowrap;
}

body.lp-chrome .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

body.lp-chrome .button img,
body.lp-chrome .sample-button img {
  transition: filter 0.2s ease;
}

body.lp-chrome .button--primary img {
  filter: brightness(0) invert(1);
}

body.lp-chrome .button--primary,
body.lp-chrome .button--secondary {
  width: 300px;
  height: 54px;
  border-radius: 20px;
  font-size: 20px;
  line-height: 1.3;
}

body.lp-chrome .button--primary {
  color: #fff;
  background: var(--lpt-black);
}

body.lp-chrome .button--secondary {
  border: 1px solid var(--lpt-black);
  color: var(--lpt-black-2);
  background: #fff;
}

body.lp-chrome .story {
  position: relative;
  z-index: 8;
  overflow: hidden;
  padding-top: 80px;
  background: var(--lpt-main);
}

body.lp-chrome .story__inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: center;
  gap: 48px;
  height: 688px;
}

body.lp-chrome .story__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

body.lp-chrome .story__title-image {
  width: 270px;
  height: 47px;
  object-fit: contain;
}

body.lp-chrome .story__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

body.lp-chrome .story__person p {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

body.lp-chrome .story__person img {
  width: 260px;
  height: auto;
  max-height: 365px;
  object-fit: contain;
}

body.lp-chrome .story__comparisons {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.lp-chrome .comparison {
  display: grid;
  grid-template-columns: 46px repeat(3, 1fr);
  height: 332px;
  overflow: hidden;
  border: 4px solid var(--lpt-black-2);
  border-radius: 16px;
}

body.lp-chrome .comparison--after {
  border-color: var(--lpt-black);
}

body.lp-chrome .comparison__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  padding: 0 14px;
  border-right: 1px solid var(--lpt-black-2);
  color: #fff;
  background: #8b999e;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  writing-mode: vertical-rl;
}

body.lp-chrome .comparison--after .comparison__label {
  border-color: var(--lpt-black);
  color: var(--lpt-black);
  background: var(--lpt-main);
  writing-mode: vertical-rl;
}

body.lp-chrome .comparison figure {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--lpt-black-2);
  background: #e8ebef;
}

body.lp-chrome .comparison--after figure {
  border-color: var(--lpt-black);
  background: #fdf5bd;
}

body.lp-chrome .comparison figure:last-child {
  border-right: 0;
}

body.lp-chrome .comparison figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

body.lp-chrome .story__message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  height: 112px;
  margin-top: 80px;
  text-align: center;
}

body.lp-chrome .story__message h2 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
}

body.lp-chrome .story__message mark {
  padding: 0 2px;
  color: #fff;
  background: var(--lpt-green);
}

body.lp-chrome .story__message p {
  color: var(--lpt-black-2);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}

body.lp-chrome .section-curve {
  position: relative;
  z-index: 7;
  width: 100%;
  aspect-ratio: 1690 / 215.199;
  overflow: hidden;
}

body.lp-chrome .section-curve img {
  width: 100%;
  height: 100%;
}

body.lp-chrome .about {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  padding: 120px 0;
  background: var(--lpt-bg);
}

body.lp-chrome .about__top {
  display: grid;
  grid-template-columns: 600px 520px;
  align-items: end;
  gap: 80px;
  height: 464px;
}

body.lp-chrome .about__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

body.lp-chrome .section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

body.lp-chrome .section-heading--left {
  align-items: flex-start;
  gap: 35px;
  text-align: left;
}

body.lp-chrome .section-heading h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: normal;
}

body.lp-chrome .section-heading p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}

body.lp-chrome .section-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 15px;
  border-radius: 999px;
  color: #fff;
  background: var(--lpt-gray-alpha);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

body.lp-chrome .about__description {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
}

body.lp-chrome .about__checks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.lp-chrome .about__checks li {
  display: flex;
  align-items: center;
  gap: 25px;
  min-height: 72px;
  padding: 20px 24px;
  border-radius: 25px;
  background: #fff;
  color: var(--lpt-black-2);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

body.lp-chrome .about__visual {
  width: 520px;
  height: 382px;
  object-fit: contain;
}

body.lp-chrome .ellipsis {
  width: 8px;
  height: 64px;
}

body.lp-chrome .deliverables {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  height: 514px;
}

body.lp-chrome .deliverables h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

body.lp-chrome .deliverables h2 span {
  padding: 0 4px 2px;
  border-radius: 4px;
  background: var(--lpt-main);
}

body.lp-chrome .deliverables__links {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 24px;
}

body.lp-chrome .sample-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 300px;
  height: 54px;
  border: 1px solid var(--lpt-black);
  border-radius: 16px;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  transition: color 0.2s ease, background-color 0.2s ease;
}

body.lp-chrome .text-link {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.01em;
  text-decoration: underline;
  transition: text-decoration-color 0.2s ease;
  text-underline-position: from-font;
}

body.lp-chrome .deliverables__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  border-top: 1px solid #d5d5d5;
  border-bottom: 1px solid #d5d5d5;
}

body.lp-chrome .deliverables__grid article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 280px;
  padding: 36px 26px;
  border-right: 1px solid #d5d5d5;
}

body.lp-chrome .deliverables__grid article:last-child {
  border-right: 0;
}

body.lp-chrome .deliverables__grid h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

body.lp-chrome .deliverables__grid p {
  width: 227px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

body.lp-chrome .deliverables__note {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

body.lp-chrome .steps {
  position: relative;
  z-index: 5;
  padding: 120px 0;
  background: var(--lpt-bg);
}

body.lp-chrome .steps .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

body.lp-chrome .steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  width: 100%;
}

body.lp-chrome .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lpt-main);
  color: #232616;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

body.lp-chrome .step-begin {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

html[data-seller="personal"] body.lp-chrome .pricing__banner a:not(.button) {
  color: #fff;
  text-decoration: underline;
}

body.lp-chrome .pricing__was {
  margin: 0;
  color: #5c6152;
  font-size: 14px;
}

body.lp-chrome .pricing__was s {
  text-decoration: line-through;
}

body.lp-chrome .step-card,
body.lp-chrome .step-wrap {
  min-width: 0;
}

body.lp-chrome .step-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 346px;
  padding: 32px;
  border-radius: 25px;
  background: #fff;
}

body.lp-chrome .step-wrap {
  position: relative;
  padding-top: 16px;
}

body.lp-chrome .step-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

body.lp-chrome .step-badge--free {
  background: #a7a7a7;
}

body.lp-chrome .step-badge--paid {
  background: var(--lpt-green);
}

body.lp-chrome .step-card__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.lp-chrome .step-card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--lpt-black-2);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

body.lp-chrome .step-card h3 span {
  min-width: 0;
}

body.lp-chrome .step-card p {
  color: var(--lpt-black-2);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

body.lp-chrome .storage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px;
}

body.lp-chrome .storage-list div {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 45px;
  padding: 12px 16px;
  border-radius: 7px;
  background: var(--lpt-gray-2);
  color: var(--lpt-black-2);
  font-family: var(--lpt-font-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

body.lp-chrome .storage-list img {
  width: 18px;
  height: 18px;
}

body.lp-chrome .step-card__screen {
  width: 100%;
  height: 165px;
  border: 1px solid var(--lpt-gray);
  border-radius: 8px;
  object-fit: cover;
}

body.lp-chrome .features {
  --lpt-features-background-height: max(482px, 28.453vw);
  position: relative;
  z-index: 4;
  overflow: hidden;
  min-height: 1449.801px;
  background: linear-gradient(
    to bottom,
    var(--lpt-bg) 0 var(--lpt-features-background-height),
    #fff var(--lpt-features-background-height) 100%
  );
}

body.lp-chrome .features__background {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: max(1694px, 100vw);
  height: auto;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

body.lp-chrome .features .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 72px;
  width: min(1196px, calc(100% - 80px));
  height: 1342.585px;
}

body.lp-chrome .feature-showcase {
  display: grid;
  grid-template-columns: 846px 350px;
  align-items: start;
  width: 100%;
}

body.lp-chrome .feature-showcase__pc {
  width: 846px;
  height: 485.585px;
  object-fit: contain;
}

/* P255 PC の画面に見本のシートの動画。画面の白い矩形は pc_image.png（1700×976）の x 182–1516・y 37–877。 */
body.lp-chrome .feature-showcase__device {
  position: relative;
  width: 846px;
}

body.lp-chrome .feature-showcase__video {
  position: absolute;
  left: 10.71%;
  top: 3.8%;
  width: 78.53%;
  height: 86.1%;
  object-fit: cover;
  border-radius: 4px;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  body.lp-chrome .feature-showcase__video { display: none; }
}

body.lp-chrome .feature-showcase__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.lp-chrome .feature-showcase__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 8px 24px;
  border-radius: 999px;
  color: #fff;
  background: var(--lpt-black-2);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

body.lp-chrome .feature-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}

body.lp-chrome .feature-cards article {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 318px;
  padding: 25px;
  border-right: 1px solid var(--lpt-gray);
}

body.lp-chrome .feature-cards article:last-child {
  border-right: 0;
}

body.lp-chrome .round-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--lpt-gray);
}

body.lp-chrome .round-icon img {
  filter: brightness(0);
}

body.lp-chrome .round-icon--tag {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--lpt-black-2, #232616);
  line-height: 1;
}

body.lp-chrome .feature-cards h3 {
  margin-bottom: 8px;
  color: var(--lpt-black-2);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

body.lp-chrome .feature-cards p {
  color: var(--lpt-black-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

body.lp-chrome .compatibility {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--lpt-gray);
}

body.lp-chrome .compatibility__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-inline: 56px;
}

body.lp-chrome .compatibility__tag {
  padding: 8px 16px;
  border-radius: 999px;
  color: #fff;
  background: var(--lpt-gray-alpha);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

body.lp-chrome .compatibility__items {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

body.lp-chrome .compatibility__items > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.lp-chrome .compatibility__items span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
}

body.lp-chrome .compatibility__items p {
  color: var(--lpt-black-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

body.lp-chrome .pricing {
  position: relative;
  z-index: 3;
  padding: 120px 80px;
  background: #fff;
}

body.lp-chrome .pricing__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 1530px;
  min-height: 695px;
  margin-inline: auto;
  padding: 0 120px;
  overflow: hidden;
  border-radius: 32px;
  background: var(--lpt-main);
}

body.lp-chrome .pricing__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 320px;
  font-family: var(--lpt-font-en);
  font-size: 56px;
  font-weight: 900;
  text-align: center;
}

body.lp-chrome .pricing__logo-word {
  font-size: 56px;
  font-weight: 900;
  line-height: 1.1;
}

body.lp-chrome .pricing__logo-art {
  width: 300px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(23, 32, 27, 0.18));
}

body.lp-chrome .pricing__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  max-width: 840px;
  padding: 40px 0;
}

body.lp-chrome .pricing__offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
}

body.lp-chrome .pricing__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--lpt-gray-alpha);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

body.lp-chrome .pricing__benefits {
  display: grid;
  grid-template-columns: 280px 292px;
  gap: 40px;
}

body.lp-chrome .pricing__benefits > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.lp-chrome .pricing__subheading {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.lp-chrome .pricing__subheading h3 {
  color: var(--lpt-black-2);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

body.lp-chrome .pricing__subheading span {
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--lpt-gray-alpha);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

body.lp-chrome .pricing__benefits ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.lp-chrome .pricing__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}

body.lp-chrome .pricing__purchase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
  width: 647px;
}

body.lp-chrome .price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  font-family: var(--lpt-font-en);
}

body.lp-chrome .price strong {
  font-size: 40px;
  line-height: 1;
}

body.lp-chrome .price span {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}

body.lp-chrome .pricing__purchase {
  gap: 20px;
}

body.lp-chrome .pricing__base {
  text-align: center;
}

body.lp-chrome .plan-bands {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

body.lp-chrome .plan-band {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  color: var(--lpt-black);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}

body.lp-chrome .plan-band b {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--lpt-black);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

body.lp-chrome .plan-band strong {
  font-weight: 800;
  white-space: nowrap;
}

body.lp-chrome .pricing__purchase > p {
  margin-top: 0;
  color: var(--lpt-black-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.01em;
}

body.lp-chrome .pricing__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

body.lp-chrome .pricing__buttons > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

body.lp-chrome .button--price {
  width: 100%;
  height: 67px;
  border-radius: 16px;
  color: #fff;
  background: var(--lpt-black);
  font-size: 20px;
}

body.lp-chrome .button--price-sub {
  height: 64px;
  border: 1px solid var(--lpt-black);
  border-radius: 16px;
  background: #fff;
  font-size: 16px;
}

body.lp-chrome .faq {
  position: relative;
  z-index: 2;
  padding: 120px 0;
  background: #fff;
}

body.lp-chrome .faq__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 1000px;
  margin-inline: auto;
}

body.lp-chrome .faq__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 24px;
}

body.lp-chrome .faq details {
  padding: 31px 32px;
  border: 1px solid var(--lpt-black);
  border-radius: 16px;
  background: var(--lpt-gray-2);
}

body.lp-chrome .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--lpt-black-2);
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  list-style: none;
  cursor: pointer;
}

body.lp-chrome .faq summary::-webkit-details-marker {
  display: none;
}

body.lp-chrome .faq summary img {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

body.lp-chrome .faq details:not([open]) summary img {
  transform: rotate(180deg);
}

body.lp-chrome .faq details p {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}


@media (hover: hover) and (pointer: fine) {

  body.lp-chrome .button--primary:hover,
body.lp-chrome .button--price:hover {
    color: var(--lpt-black);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--lpt-black);
  }

  body.lp-chrome .button--primary:hover img {
    filter: none;
  }

  body.lp-chrome .button--secondary:hover,
body.lp-chrome .sample-button:hover,
body.lp-chrome .button--price-sub:hover {
    color: #fff;
    background: var(--lpt-black);
  }

  body.lp-chrome .button--secondary:hover img,
body.lp-chrome .sample-button:hover img {
    filter: brightness(0) invert(1);
  }

  body.lp-chrome .text-link:hover {
    text-decoration-color: transparent;
  }

}


body.lp-chrome .button--primary:focus-visible,
body.lp-chrome .button--price:focus-visible {
  color: var(--lpt-black);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--lpt-black);
}

body.lp-chrome .button--primary:focus-visible img {
  filter: none;
}

body.lp-chrome .button--secondary:focus-visible,
body.lp-chrome .sample-button:focus-visible,
body.lp-chrome .button--price-sub:focus-visible {
  color: #fff;
  background: var(--lpt-black);
}

body.lp-chrome .button--secondary:focus-visible img,
body.lp-chrome .sample-button:focus-visible img {
  filter: brightness(0) invert(1);
}

body.lp-chrome .text-link:focus-visible {
  text-decoration-color: transparent;
}


@media (max-width: 1350px) {

  body.lp-chrome .hero__content {
    flex: 1;
    min-width: 0;
    padding-right: 32px;
  }

  body.lp-chrome .hero h1 {
    width: min(680px, 100%);
    height: auto;
  }

  body.lp-chrome .pricing__banner {
    padding-inline: 60px;
  }
}

@media (max-width: 1199px) {
  body.lp-chrome .container {
    width: calc(100% - 80px);
  }


  body.lp-chrome .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
    padding: 120px 0;
  }

  body.lp-chrome .hero__visual {
    flex: 0 0 auto;
    width: 612px;
    height: 324px;
  }

  body.lp-chrome .hero__visual > img {
    left: 0;
  }

  body.lp-chrome .hero__circle {
    top: -64px;
    right: -78px;
    width: 281px;
    height: 281px;
  }

  body.lp-chrome .hero__content {
    flex: 0 0 auto;
    gap: 56px;
    width: 100%;
    padding: 0 32px;
  }

  body.lp-chrome .hero h1 {
    width: min(680px, 100%);
    height: auto;
  }

  body.lp-chrome .story {
    padding: 0 24px;
  }

  body.lp-chrome .story__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
    width: 100%;
    height: auto;
  }

  body.lp-chrome .story__person img {
    width: 308.64px;
    max-height: 425px;
  }

  body.lp-chrome .comparison {
    height: 260px;
  }

  body.lp-chrome .story__message {
    height: 112px;
    margin-top: 64px;
  }

  body.lp-chrome .about {
    gap: 64px;
    padding: 100px 40px;
  }

  body.lp-chrome .about__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 80px;
    width: 100%;
    height: auto;
  }

  body.lp-chrome .about__content {
    width: 100%;
  }

  body.lp-chrome .about__visual {
    align-self: center;
  }

  body.lp-chrome .deliverables {
    width: 100%;
    height: auto;
  }

  body.lp-chrome .deliverables__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body.lp-chrome .deliverables__grid article {
    min-height: 279px;
    padding-inline: 52px;
  }

  body.lp-chrome .deliverables__grid article:nth-child(2) {
    border-right: 0;
  }

  body.lp-chrome .deliverables__grid article:nth-child(-n + 2) {
    border-bottom: 1px solid #d5d5d5;
  }

  body.lp-chrome .steps {
    padding: 100px 40px;
  }

  body.lp-chrome .steps .container {
    width: 100%;
  }

  body.lp-chrome .steps__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  body.lp-chrome .step-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    min-height: 229px;
    height: auto;
    padding: 32px;
  }

  body.lp-chrome .step-card--first {
    min-height: 215px;
    height: auto;
  }

  body.lp-chrome .step-card__copy {
    flex: 1 1 0;
  }

  body.lp-chrome .step-card h3 {
    font-size: 24px;
  }

  body.lp-chrome .storage-list {
    flex: 1 1 0;
    width: auto;
    padding: 0;
  }

  body.lp-chrome .step-card__screen {
    flex: 1 1 0;
    width: auto;
    height: 165px;
  }

  body.lp-chrome .features {
    --lpt-features-background-height: 28.453vw;
    min-height: 1888px;
    padding: 100px 32px;
  }

  body.lp-chrome .features__background {
    width: 100vw;
  }

  body.lp-chrome .features .container {
    gap: 72px;
    width: 100%;
    height: auto;
  }

  body.lp-chrome .feature-showcase {
    grid-template-columns: minmax(0, 1fr) 314px;
    align-items: center;
    gap: 24px;
  }

  body.lp-chrome .feature-showcase__pc {
    width: 100%;
    height: auto;
  }

  body.lp-chrome .feature-showcase__device {
    width: 100%;
  }

  body.lp-chrome .feature-showcase__list {
    width: 314px;
  }

  body.lp-chrome .feature-showcase__list li {
    min-height: 48px;
    padding-inline: 20px;
    font-size: 16px;
  }

  body.lp-chrome .feature-cards {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -12px;
  }

  body.lp-chrome .feature-cards article {
    min-height: 278px;
    padding: 32px 40px;
  }

  body.lp-chrome .feature-cards article:nth-child(2) {
    border-right: 0;
  }

  body.lp-chrome .feature-cards article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--lpt-gray);
  }

  body.lp-chrome .compatibility {
    flex-direction: column;
    align-items: center;
    margin-top: -32px;
  }

  body.lp-chrome .compatibility__group {
    padding-inline: 56px;
  }

  body.lp-chrome .pricing {
    padding: 100px 40px;
  }

  body.lp-chrome .pricing__banner {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 987px;
    padding: 0 40px;
  }

  body.lp-chrome .pricing__logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 320px;
    max-width: 100%;
    height: 148px;
    margin-inline: auto;
  }

  body.lp-chrome .pricing__logo-art {
    width: 120px;
  }

  body.lp-chrome .pricing__content {
    gap: 80px;
    width: 100%;
    max-width: 584px;
    margin-inline: auto;
    padding: 0;
  }

  body.lp-chrome .pricing__benefits {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  body.lp-chrome .pricing__purchase {
    width: 100%;
  }

  body.lp-chrome .faq {
    padding: 100px 40px;
  }

  body.lp-chrome .faq__inner {
    width: 100%;
  }

  body.lp-chrome .faq__grid {
    grid-template-columns: 1fr;
  }

  body.lp-chrome .faq details {
    padding: 32px;
  }
}

@media (max-width: 743px) {
  body.lp-page {
    background: linear-gradient(to bottom, var(--lpt-main) 0 80px, var(--lpt-bg) 80px 100%);
  }

  body.lp-chrome .container {
    width: calc(100% - 48px);
  }


  body.lp-chrome .hero__inner {
    gap: 32px;
    padding: 80px 0;
  }

  body.lp-chrome .hero__visual {
    width: 334px;
    height: 176px;
  }

  body.lp-chrome .hero__circle {
    top: -35px;
    right: -43px;
    width: 153px;
    height: 153px;
  }

  body.lp-chrome .hero__content {
    gap: 56px;
    padding: 0 40px;
  }

  body.lp-chrome .hero h1 {
    width: 336px;
  }

  body.lp-chrome .hero__copy {
    width: 100%;
  }

  body.lp-chrome .hero__copy > p:not(.hero__lead) {
    line-height: 1.6;
  }

  body.lp-chrome .button-row {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  body.lp-chrome .hero__count {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  body.lp-chrome .button--secondary.hero__count-button {
    width: 100%;
  }

  body.lp-chrome .button--primary,
body.lp-chrome .button--secondary {
    width: 100%;
  }

  body.lp-chrome .story {
    padding: 0 56px;
  }

  body.lp-chrome .story__inner {
    gap: 48px;
  }

  body.lp-chrome .story__person img {
    width: 252px;
    max-height: 347px;
  }

  body.lp-chrome .story__comparisons {
    gap: 24px;
  }

  body.lp-chrome .comparison {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 823px;
  }

  body.lp-chrome .comparison__label {
    width: 100%;
    height: 46px;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--lpt-black-2);
    writing-mode: horizontal-tb;
  }

  body.lp-chrome .comparison--after .comparison__label {
    writing-mode: horizontal-tb;
  }

  body.lp-chrome .comparison figure {
    flex: 0 0 259px;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--lpt-black-2);
  }

  body.lp-chrome .comparison figure:last-child {
    border-bottom: 0;
  }

  body.lp-chrome .story__message {
    gap: 16px;
    width: 100%;
    height: 208px;
    margin-top: 48px;
    padding-bottom: 24px;
  }

  body.lp-chrome .story__message h2 {
    font-size: 28px;
  }

  body.lp-chrome .story__message mark {
    display: inline-block;
    white-space: nowrap;
  }

  body.lp-chrome .story__message p {
    font-size: 15px;
  }

  body.lp-chrome .about {
    gap: 64px;
    padding: 60px 24px;
  }

  body.lp-chrome .about__top {
    gap: 80px;
  }

  body.lp-chrome .about__content {
    gap: 24px;
  }

  body.lp-chrome .section-heading h2 {
    font-size: 36px;
  }

  body.lp-chrome .section-heading p {
    font-size: 16px;
  }

  body.lp-chrome .about__description {
    font-size: 16px;
  }

  body.lp-chrome .about__checks li {
    min-height: 96px;
  }

  body.lp-chrome .about__visual {
    width: 342px;
    height: auto;
  }

  body.lp-chrome .deliverables h2 {
    font-size: 32px;
  }

  body.lp-chrome .deliverables__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  body.lp-chrome .deliverables__grid {
    grid-template-columns: 1fr;
  }

  body.lp-chrome .deliverables__grid article {
    min-height: 253px;
    padding: 36px 57px;
    border-right: 0;
    border-bottom: 1px solid #d5d5d5;
  }

  body.lp-chrome .deliverables__grid article:nth-child(odd) {
    min-height: 279px;
  }

  body.lp-chrome .deliverables__grid article:last-child {
    border-bottom: 0;
  }

  body.lp-chrome .deliverables__grid p {
    width: 227px;
  }

  body.lp-chrome .deliverables__note {
    font-size: 16px;
    white-space: nowrap;
  }

  body.lp-chrome .steps {
    padding: 60px 24px;
  }

  body.lp-chrome .steps .container {
    gap: 24px;
  }

  body.lp-chrome .steps .section-heading {
    gap: 24px;
  }

  body.lp-chrome .steps__grid {
    gap: 12px;
  }

  body.lp-chrome .step-card {
    flex-direction: column;
    gap: 24px;
    min-height: 365px;
    height: auto;
    padding: 32px;
  }

  body.lp-chrome .step-card--first {
    gap: 45px;
    min-height: 357px;
    height: auto;
  }

  body.lp-chrome .step-card__copy {
    flex: 0 0 auto;
    width: 100%;
  }

  body.lp-chrome .storage-list {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 24px;
  }

  body.lp-chrome .step-card__screen {
    flex: 0 0 auto;
    width: 100%;
  }

  body.lp-chrome .features {
    --lpt-features-background-height: 28.453vw;
    min-height: 0;
    padding: 60px 24px;
  }

  body.lp-chrome .features .container {
    gap: 40px;
  }

  body.lp-chrome .features .section-heading {
    align-items: center;
    gap: 24px;
    text-align: left;
  }

  body.lp-chrome .feature-showcase {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  body.lp-chrome .feature-showcase__pc {
    width: 342px;
  }

  body.lp-chrome .feature-showcase__device {
    width: 342px;
  }

  body.lp-chrome .feature-showcase__list {
    width: 314px;
  }

  body.lp-chrome .feature-showcase__list li {
    padding-inline: 24px;
    font-size: 18px;
  }

  body.lp-chrome .feature-cards {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }

  body.lp-chrome .feature-cards article {
    min-height: 0;
    padding: 25px;
    border-right: 0;
    border-bottom: 1px solid var(--lpt-gray);
  }

  body.lp-chrome .feature-cards article:nth-child(2) {
    border-bottom: 1px solid var(--lpt-gray);
  }

  body.lp-chrome .feature-cards article:last-child {
    border-bottom: 0;
  }

  body.lp-chrome .compatibility {
    gap: 60px;
    margin-top: 0;
  }

  body.lp-chrome .compatibility__group {
    width: 100%;
    padding-inline: 0;
  }

  body.lp-chrome .compatibility__items {
    gap: 12px;
  }

  body.lp-chrome .pricing {
    padding: 60px 0;
  }

  body.lp-chrome .pricing__banner {
    min-height: 1073px;
    padding: 0 40px;
  }

  body.lp-chrome .pricing__logo {
    height: 138px;
    font-size: 48px;
  }

  body.lp-chrome .pricing__logo-word {
    font-size: 48px;
  }

  body.lp-chrome .pricing__content {
    max-width: 310px;
    padding-bottom: 40px;
  }

  body.lp-chrome .pricing__offer {
    align-items: flex-start;
  }

  body.lp-chrome .pricing__benefits li {
    white-space: nowrap;
  }

  body.lp-chrome .pricing__purchase {
    gap: 16px;
    width: 100%;
  }

  body.lp-chrome .price {
    white-space: normal;
    flex-wrap: wrap;
    text-align: center;
  }

  body.lp-chrome .pricing__purchase > p {
    margin-top: 0;
  }

  body.lp-chrome .pricing__buttons > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.lp-chrome .faq {
    padding: 60px 24px;
  }

  body.lp-chrome .faq__inner {
    gap: 56px;
  }

  body.lp-chrome .faq .section-heading {
    gap: 40px;
  }

  body.lp-chrome .faq details {
    padding: 32px;
  }

}

/* L10 個人の料金。帯は藍のまま、字は白。白い紙は個人だけ。法人の段はこの規則に当たらない。 */
html[data-seller="personal"] body.lp-chrome .pricing__banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "logo offer"
    "card card"
    "cross cross"
    "once once";
  align-items: center;
  column-gap: 40px;
  row-gap: 0;
  min-height: 0;
  padding: 48px 56px 40px;
}

html[data-seller="personal"] body.lp-chrome .pricing__content,
html[data-seller="personal"] body.lp-chrome .pricing__purchase {
  display: contents;
}

html[data-seller="personal"] body.lp-chrome .pricing__logo {
  grid-area: logo;
  height: auto;
  color: #fff;
}

html[data-seller="personal"] body.lp-chrome .pricing__offer {
  grid-area: offer;
  min-width: 0;
}

html[data-seller="personal"] body.lp-chrome .pricing__benefits {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

html[data-seller="personal"] body.lp-chrome .pricing__subheading h3,
html[data-seller="personal"] body.lp-chrome .pricing__benefits li {
  color: #fff;
}

html[data-seller="personal"] body.lp-chrome .pricing__benefits li {
  white-space: normal;
}

html[data-seller="personal"] body.lp-chrome .pricing__benefits li img {
  filter: brightness(0) invert(1);
}

html[data-seller="personal"] body.lp-chrome .pricing__purchase > p.pricing__cross {
  grid-area: cross;
}

html[data-seller="personal"] body.lp-chrome .pricing__purchase > p {
  grid-area: once;
  margin: 6px 0;
  color: #fff;
  line-height: 1.8;
  text-align: center;
}

html[data-seller="personal"] body.lp-chrome .pricing__buttons {
  display: none;
}

body.lp-chrome .paper-set {
  width: min(980px, 100%);
  margin: 28px auto 22px;
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  color: var(--lpt-black);
  box-shadow: 0 12px 32px rgba(23, 32, 27, 0.18);
}

body.lp-chrome .paper-set__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

body.lp-chrome .paper-set__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

body.lp-chrome .paper-set__yen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

body.lp-chrome .paper-set__tax.nowrap {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

body.lp-chrome .paper-set__ex {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

body.lp-chrome .paper-set__start {
  flex: 0 0 auto;
  height: 52px;
  padding: 0 28px;
  border-radius: 12px;
  color: #fff;
  background: var(--lpt-black);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}

body.lp-chrome .paper-set__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.8fr);
  gap: 28px;
  align-items: center;
  margin-top: 28px;
}

body.lp-chrome .paper-set__sheets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

body.lp-chrome .paper-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e4e0d6;
  border-radius: 12px;
  background: #fff;
}

body.lp-chrome .paper-card img {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(14%);
}

body.lp-chrome .paper-card h3 {
  margin: 12px 0 8px;
  color: var(--lpt-black);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

body.lp-chrome .paper-card p,
body.lp-chrome .paper-set__all {
  margin: 0;
  color: var(--lpt-black);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

body.lp-chrome .paper-set__all {
  grid-column: 1 / -1;
}

body.lp-chrome .paper-set__sample {
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* P258 見本は 3 枚重ね。後ろから処理の記録・受け取り・引き継ぎシート（手前） */
body.lp-chrome .paper-set__stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 760;
}

body.lp-chrome .paper-set__stack img {
  position: absolute;
  width: 86%;
  height: auto;
  aspect-ratio: 1120 / 700;
  object-fit: cover;
  object-position: top;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 14px 28px rgba(23, 32, 27, 0.22);
}

body.lp-chrome .paper-set__stack img:nth-child(1) {
  left: 0;
  top: 0;
  transform: rotate(-5deg);
}

body.lp-chrome .paper-set__stack img:nth-child(2) {
  left: 7%;
  top: 6%;
  transform: rotate(0);
}

body.lp-chrome .paper-set__stack img:nth-child(3) {
  left: 14%;
  top: 12%;
  transform: rotate(4deg);
}

body.lp-chrome .paper-set__was {
  margin: 8px 0 0;
  color: #5c6152;
  font-size: 14px;
  line-height: 1.5;
}

body.lp-chrome .paper-set__was s {
  text-decoration: line-through;
}

body.lp-chrome .paper-set__power {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

body.lp-chrome .paper-set__sample figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

html[data-seller="personal"] body.lp-chrome .pricing__banner .paper-set a:not(.button) {
  color: var(--lpt-black);
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  body.lp-chrome .paper-set__start:hover {
    color: var(--lpt-black);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--lpt-black);
  }

  html[data-seller="personal"] body.lp-chrome .paper-set__start:hover {
    color: var(--lpt-main);
    box-shadow: inset 0 0 0 1px var(--lpt-main);
  }
}

body.lp-chrome .paper-set__start:focus-visible {
  outline: 2px solid var(--lpt-black);
  outline-offset: 3px;
}

/* 個人だけの色：藍のボタン・札の場所（grid-area） */
html[data-seller="personal"] body.lp-chrome .paper-set {
  grid-area: card;
}

html[data-seller="personal"] body.lp-chrome .paper-set__start {
  background: var(--lpt-main);
}

html[data-seller="personal"] body.lp-chrome .paper-set__start:focus-visible {
  outline-color: var(--lpt-main);
}

@media (max-width: 1199px) {
  html[data-seller="personal"] body.lp-chrome .pricing__banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 36px 24px 32px;
    gap: 24px;
  }

  html[data-seller="personal"] body.lp-chrome .pricing__logo {
    width: auto;
    margin-inline: 0;
    text-align: left;
  }

  body.lp-chrome .paper-set {
    margin: 0 auto;
  }
}

@media (max-width: 743px) {
  html[data-seller="personal"] body.lp-chrome .pricing__banner {
    padding: 28px 16px 32px;
  }

  body.lp-chrome .paper-set {
    padding: 32px;
  }

  body.lp-chrome .paper-set__top {
    flex-direction: column;
    align-items: stretch;
  }

  body.lp-chrome .paper-set__start {
    width: 100%;
  }

  body.lp-chrome .paper-set__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  body.lp-chrome .paper-set__sample {
    order: -1;
  }

  body.lp-chrome .paper-set__sheets {
    grid-template-columns: 1fr;
  }
}

/* P258 法人の価格の段も個人と同じ型（白い札）。帯は緑・字は黒のまま。 */
html:not([data-seller="personal"]) body.lp-chrome .pricing__banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 40px;
  row-gap: 0;
  min-height: 0;
  padding: 48px 56px 40px;
}

html:not([data-seller="personal"]) body.lp-chrome .pricing__content,
html:not([data-seller="personal"]) body.lp-chrome .pricing__purchase {
  display: contents;
}

html:not([data-seller="personal"]) body.lp-chrome .pricing__logo {
  height: auto;
}

html:not([data-seller="personal"]) body.lp-chrome .pricing__offer {
  min-width: 0;
}

html:not([data-seller="personal"]) body.lp-chrome .pricing__purchase > * {
  grid-column: 1 / -1;
  min-width: 0;
}

html:not([data-seller="personal"]) body.lp-chrome .pricing__purchase > p {
  margin: 6px 0;
  text-align: center;
}

html:not([data-seller="personal"]) body.lp-chrome .pricing__buttons {
  justify-self: center;
  width: min(647px, 100%);
  margin-top: 16px;
}

@media (max-width: 1199px) {
  html:not([data-seller="personal"]) body.lp-chrome .pricing__banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 36px 24px 32px;
    gap: 24px;
  }

  html:not([data-seller="personal"]) body.lp-chrome .pricing__offer {
    align-items: center;
  }

  html:not([data-seller="personal"]) body.lp-chrome .pricing__buttons {
    align-self: center;
  }
}

@media (max-width: 743px) {
  html:not([data-seller="personal"]) body.lp-chrome .pricing__banner {
    padding: 28px 16px 32px;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.lp-page) {
    scroll-behavior: auto;
  }

}

/* L11 個人は藍の上の字を白に。緑のボタンと mark、白い紙・白い段の字は触らない。 */
html[data-seller="personal"] body.lp-chrome .hero h1,
html[data-seller="personal"] body.lp-chrome .hero__lead,
html[data-seller="personal"] body.lp-chrome .hero__copy > p {
  color: #fff;
}

html[data-seller="personal"] body.lp-chrome .story__message h2,
html[data-seller="personal"] body.lp-chrome .story__message p,
html[data-seller="personal"] body.lp-chrome .comparison--after .comparison__label {
  color: #fff;
}

html[data-seller="personal"] body.lp-chrome .deliverables h2 span,
html[data-seller="personal"] body.lp-chrome .step-num {
  color: #fff;
}

/* P190 「AI に、このまま渡せます。」の帯。hero と story の間。hero の主ボタン（300×54・20px）より小さく、白い札で強めに出す。 */
body.lp-chrome .ai-pass {
  position: relative;
  z-index: 9;
  padding: 0 40px 24px;
  background: var(--lpt-main);
}

body.lp-chrome .ai-pass__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: min(880px, 100%);
  margin-inline: auto;
  padding: 40px 48px;
  border: 4px solid var(--lpt-black);
  border-radius: 20px;
  color: var(--lpt-black);
  background: #fff;
  box-shadow: 8px 8px 0 var(--lpt-black);
  text-align: center;
}

body.lp-chrome .ai-pass h2 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.4;
}

body.lp-chrome .ai-pass__lead {
  max-width: 38em;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}

body.lp-chrome .ai-pass__text {
  width: 100%;
  margin: 0;
  padding: 20px 24px;
  border-left: 8px solid var(--lpt-main);
  border-radius: 8px;
  background: var(--lpt-gray-2);
  box-shadow: inset 0 0 0 1px var(--lpt-gray);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.8;
  text-align: left;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

body.lp-chrome .ai-pass__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

body.lp-chrome .lpt .ai-pass .button {
  min-width: 240px;
  height: 46px;
  padding: 0 24px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
}

body.lp-chrome .lpt .ai-pass .ai-pass__copy {
  border: 0;
  color: #fff;
  background: var(--lpt-black);
}

body.lp-chrome .lpt .ai-pass .ai-pass__download {
  border: 1px solid var(--lpt-black);
  color: var(--lpt-black-2);
  background: #fff;
}

body.lp-chrome .ai-pass .button:focus-visible {
  outline: 3px solid var(--lpt-green);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  body.lp-chrome .lpt .ai-pass .ai-pass__copy:hover {
    color: var(--lpt-black);
    background: var(--lpt-main);
    box-shadow: inset 0 0 0 1px var(--lpt-black);
  }

  body.lp-chrome .lpt .ai-pass .ai-pass__download:hover {
    background: var(--lpt-gray);
  }

  html[data-seller="personal"] body.lp-chrome .lpt .ai-pass .ai-pass__copy:hover {
    color: #fff;
  }
}

@media (max-width: 743px) {
  body.lp-chrome .ai-pass {
    padding: 0 16px 56px;
  }

  body.lp-chrome .ai-pass__card {
    gap: 16px;
    padding: 28px 20px;
    box-shadow: 6px 6px 0 var(--lpt-black);
  }

  body.lp-chrome .ai-pass h2 {
    font-size: 24px;
  }

  body.lp-chrome .ai-pass__lead {
    text-align: left;
  }

  body.lp-chrome .ai-pass__text {
    padding: 16px;
    font-size: 15px;
  }

  body.lp-chrome .ai-pass__buttons {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  body.lp-chrome .lpt .ai-pass .button {
    width: 100%;
    min-width: 0;
  }
}

/* P272 札の中に営業の口（MCP）の URL。色は .ai-pass__text と同じ系統。 */
body.lp-chrome .ai-pass__mcp {
  width: 100%;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(23, 32, 27, 0.15);
  text-align: left;
}

body.lp-chrome .ai-pass__mcp-lead {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.6;
}

body.lp-chrome .ai-pass__mcp-url {
  margin: 0;
  padding: 12px 16px;
  border-left: 8px solid var(--lpt-main);
  border-radius: 8px;
  background: var(--lpt-gray-2);
  box-shadow: inset 0 0 0 1px var(--lpt-gray);
  color: var(--lpt-black);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  word-break: break-all;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

body.lp-chrome .ai-pass__mcp-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--lpt-text-sub, #5a6472);
}

/* P234/P243：こんな時に（色は lp-top.css の変数だけ。index.html の <style> は CSP で捨てられるのでここへ） */
body.lp-chrome .scenes { position: relative; z-index: 4; padding: 96px 0; background: #fff; }
body.lp-chrome .scenes .container { display: flex; flex-direction: column; align-items: center; gap: 48px; }
body.lp-chrome .scenes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; align-self: stretch; margin: 0; padding: 0; list-style: none; }
body.lp-chrome .scenes__grid article { display: flex; flex-direction: column; align-items: center; padding: 25px; border: 1px solid var(--lpt-gray); }
body.lp-chrome .scenes__grid .round-icon { margin-bottom: 16px; }
body.lp-chrome .scenes__grid h3 { margin-bottom: 8px; color: var(--lpt-black-2); font-size: 18px; font-weight: 700; line-height: 1.4; text-align: center; }
body.lp-chrome .scenes__grid p { color: var(--lpt-black-2); font-size: 14px; font-weight: 400; line-height: 1.6; }
@media (max-width: 1199px) { body.lp-chrome .scenes { padding: 64px 0; } }
@media (max-width: 743px) { body.lp-chrome .scenes { padding: 48px 0; } body.lp-chrome .scenes .container { gap: 24px; } }