:root {
  --lp-width: min(100vw, 53.3125rem);
  --ink: #1f130c;
  --gold: #eacb70;
  --red: #a31310;
}

/* Block 2 rebuild: editable cards and comparison table */
.methods-block {
  height: calc(1900 / 853 * var(--lp-width));
  padding-top: 0;
  background:
    url("./assets/clean/methods-bg.webp") center center / cover no-repeat,
    linear-gradient(180deg, #e0a85f 0%, #f2d5a5 54%, #3b1f11 100%);
}

.methods-title {
  width: calc(828 / 853 * var(--lp-width));
  padding-top: 0;
}

.methods-side-banner {
  position: absolute;
  z-index: 2;
  top: calc(18 / 853 * var(--lp-width));
  width: calc(92 / 853 * var(--lp-width));
  height: calc(235 / 853 * var(--lp-width));
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  color: rgba(221, 160, 70, 0.78);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(38 / 853 * var(--lp-width));
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  background: linear-gradient(180deg, rgba(32, 22, 13, 0.22), rgba(32, 22, 13, 0.06));
  transform: rotate(-12deg);
  text-shadow: 0 calc(2 / 853 * var(--lp-width)) calc(2 / 853 * var(--lp-width)) rgba(58, 31, 12, 0.65);
}

.side-left {
  left: calc(18 / 853 * var(--lp-width));
}

.side-right {
  right: calc(20 / 853 * var(--lp-width));
  transform: rotate(12deg);
}

.methods-rope {
  top: calc(117 / 853 * var(--lp-width));
  width: calc(765 / 853 * var(--lp-width));
}

.method-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(8 / 853 * var(--lp-width));
  margin-top: calc(-20 / 853 * var(--lp-width));
  padding: 0 calc(19 / 853 * var(--lp-width));
}

.method-option {
  position: relative;
  min-height: calc(352 / 853 * var(--lp-width));
  padding: calc(14 / 853 * var(--lp-width)) calc(13 / 853 * var(--lp-width)) calc(14 / 853 * var(--lp-width));
  border: calc(4 / 853 * var(--lp-width)) solid #b67a20;
  border-radius: calc(6 / 853 * var(--lp-width));
  background:
    linear-gradient(180deg, rgba(255, 252, 230, 0.94), rgba(246, 221, 171, 0.94)),
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 52%);
  box-shadow:
    inset 0 0 0 calc(2 / 853 * var(--lp-width)) rgba(255, 245, 190, 0.82),
    inset 0 0 calc(20 / 853 * var(--lp-width)) rgba(121, 73, 16, 0.18),
    0 calc(8 / 853 * var(--lp-width)) calc(7 / 853 * var(--lp-width)) rgba(50, 20, 5, 0.38);
  text-align: center;
}

.method-option::before,
.method-option::after {
  content: "";
  position: absolute;
  width: calc(38 / 853 * var(--lp-width));
  height: calc(38 / 853 * var(--lp-width));
  border-color: #d8a13e;
  border-style: solid;
  pointer-events: none;
}

.method-option::before {
  top: calc(9 / 853 * var(--lp-width));
  left: calc(9 / 853 * var(--lp-width));
  border-width: calc(4 / 853 * var(--lp-width)) 0 0 calc(4 / 853 * var(--lp-width));
  border-radius: calc(8 / 853 * var(--lp-width)) 0 0 0;
}

.method-option::after {
  right: calc(9 / 853 * var(--lp-width));
  bottom: calc(9 / 853 * var(--lp-width));
  border-width: 0 calc(4 / 853 * var(--lp-width)) calc(4 / 853 * var(--lp-width)) 0;
  border-radius: 0 0 calc(8 / 853 * var(--lp-width)) 0;
}

.method-recommend {
  position: absolute;
  top: calc(-22 / 853 * var(--lp-width));
  left: calc(-18 / 853 * var(--lp-width));
  z-index: 3;
  width: calc(104 / 853 * var(--lp-width));
  filter: drop-shadow(0 calc(4 / 853 * var(--lp-width)) calc(3 / 853 * var(--lp-width)) rgba(70, 20, 5, 0.42));
}

.method-icon {
  width: calc(110 / 853 * var(--lp-width));
  height: calc(86 / 853 * var(--lp-width));
  margin: calc(10 / 853 * var(--lp-width)) auto calc(6 / 853 * var(--lp-width));
  object-fit: contain;
  mix-blend-mode: multiply;
}

.method-line-icon {
  width: calc(126 / 853 * var(--lp-width));
}

.method-phone-icon {
  width: calc(132 / 853 * var(--lp-width));
}

.method-option h2 {
  margin: 0;
  padding-bottom: calc(7 / 853 * var(--lp-width));
  border-bottom: calc(2 / 853 * var(--lp-width)) solid rgba(103, 75, 35, 0.48);
  color: #2c221a;
  font-size: calc(29 / 853 * var(--lp-width));
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 0 calc(1 / 853 * var(--lp-width)) 0 rgba(255, 255, 255, 0.9);
}

.method-web h2 {
  color: #8f1116;
  font-size: calc(31 / 853 * var(--lp-width));
  font-family: Georgia, "Times New Roman", "Yu Mincho", serif;
}

.method-option p {
  margin: calc(8 / 853 * var(--lp-width)) 0 calc(12 / 853 * var(--lp-width));
  color: #2c2118;
  font-size: calc(16 / 853 * var(--lp-width));
  font-weight: 900;
  line-height: 1.45;
}

.method-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(46 / 853 * var(--lp-width));
  border-radius: calc(8 / 853 * var(--lp-width));
  color: #fff;
  font-size: calc(23 / 853 * var(--lp-width));
  font-weight: 900;
  text-decoration: none;
  box-shadow:
    inset 0 calc(2 / 853 * var(--lp-width)) 0 rgba(255, 255, 255, 0.42),
    inset 0 calc(-4 / 853 * var(--lp-width)) 0 rgba(74, 34, 6, 0.28),
    0 calc(4 / 853 * var(--lp-width)) calc(5 / 853 * var(--lp-width)) rgba(57, 24, 5, 0.34);
  text-shadow: 0 calc(2 / 853 * var(--lp-width)) calc(2 / 853 * var(--lp-width)) rgba(60, 18, 4, 0.65);
}

.method-button::after {
  content: ">";
  margin-left: calc(22 / 853 * var(--lp-width));
  font-family: Arial, sans-serif;
  font-size: calc(30 / 853 * var(--lp-width));
}

.method-button.red {
  background: linear-gradient(180deg, #f02b28, #a80d12);
}

.method-button.orange {
  background: linear-gradient(180deg, #ff981f, #d85302);
}

.method-button.gold {
  background: linear-gradient(180deg, #dfb72d, #9f7109);
}

.compare-area {
  margin-top: calc(10 / 853 * var(--lp-width));
  padding: 0 calc(22 / 853 * var(--lp-width));
}

.compare-heading {
  width: calc(640 / 853 * var(--lp-width));
  margin-bottom: calc(-10 / 853 * var(--lp-width));
}

.compare-panel {
  position: relative;
  overflow: hidden;
  border: calc(5 / 853 * var(--lp-width)) solid #14100d;
  border-radius: calc(2 / 853 * var(--lp-width));
  background:
    linear-gradient(180deg, rgba(255, 249, 225, 0.96), rgba(248, 223, 178, 0.96)),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 72%);
  box-shadow: 0 calc(9 / 853 * var(--lp-width)) calc(7 / 853 * var(--lp-width)) rgba(35, 15, 5, 0.42);
}

.compare-grid {
  display: grid;
  grid-template-columns: 26% 24.7% 24.7% 24.6%;
  grid-template-rows: calc(54 / 853 * var(--lp-width)) repeat(5, calc(80 / 853 * var(--lp-width)));
  border: calc(1 / 853 * var(--lp-width)) solid rgba(171, 131, 73, 0.56);
}

.compare-head,
.compare-item,
.compare-data {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: calc(1 / 853 * var(--lp-width)) solid rgba(171, 131, 73, 0.56);
  border-bottom: calc(1 / 853 * var(--lp-width)) solid rgba(171, 131, 73, 0.56);
  text-align: center;
  font-weight: 900;
  line-height: 1.28;
}

.compare-head {
  color: #fff;
  font-size: calc(23 / 853 * var(--lp-width));
  text-shadow: 0 calc(2 / 853 * var(--lp-width)) calc(2 / 853 * var(--lp-width)) rgba(36, 16, 5, 0.7);
  box-shadow: inset 0 calc(2 / 853 * var(--lp-width)) 0 rgba(255, 242, 178, 0.35);
}

.compare-head.item {
  background: linear-gradient(180deg, #61452d, #2e2118);
}

.compare-head.web {
  background: linear-gradient(180deg, #c51924, #8f0c12);
}

.compare-head.line {
  background: linear-gradient(180deg, #ee7915, #c65304);
}

.compare-head.phone {
  background: linear-gradient(180deg, #c3931a, #8d6509);
}

.compare-item {
  gap: calc(8 / 853 * var(--lp-width));
  justify-content: flex-start;
  padding-left: calc(18 / 853 * var(--lp-width));
  color: #3f2b1f;
  font-size: calc(16 / 853 * var(--lp-width));
}

.compare-item img {
  width: calc(38 / 853 * var(--lp-width));
  height: calc(38 / 853 * var(--lp-width));
  object-fit: contain;
}

.compare-data {
  flex-direction: column;
  color: #3d2a1c;
  font-size: calc(16 / 853 * var(--lp-width));
}

.compare-data.web {
  color: #b0121a;
}

.compare-data.line {
  color: #dc6410;
}

.compare-data.phone {
  color: #9b720b;
}

.compare-data strong {
  font-size: calc(34 / 853 * var(--lp-width));
  line-height: 0.95;
  font-family: "Times New Roman", serif;
}

.compare-data span {
  margin-top: calc(2 / 853 * var(--lp-width));
  font-size: calc(13 / 853 * var(--lp-width));
}

.compare-data.small {
  padding: 0 calc(6 / 853 * var(--lp-width));
  font-size: calc(14 / 853 * var(--lp-width));
}

.compare-note {
  margin-top: calc(7 / 853 * var(--lp-width));
  font-size: calc(14 / 853 * var(--lp-width));
}

.methods-bottom {
  height: calc(235 / 853 * var(--lp-width));
}

.methods-character {
  left: calc(5 / 853 * var(--lp-width));
  width: calc(178 / 853 * var(--lp-width));
}

.methods-balloon {
  left: calc(214 / 853 * var(--lp-width));
  bottom: calc(92 / 853 * var(--lp-width));
  width: calc(370 / 853 * var(--lp-width));
}

.methods-flag {
  right: calc(8 / 853 * var(--lp-width));
  bottom: calc(54 / 853 * var(--lp-width));
  width: calc(282 / 853 * var(--lp-width));
}

@media (max-width: 53.3125rem) {
  .methods-block {
    height: calc(1516 / 853 * var(--lp-width));
  }

  .methods-title {
    width: calc(828 / 853 * var(--lp-width));
  }

  .methods-rope {
    top: calc(117 / 853 * var(--lp-width));
    width: calc(765 / 853 * var(--lp-width));
  }

  .method-cards {
    gap: calc(8 / 853 * var(--lp-width));
    margin-top: calc(-20 / 853 * var(--lp-width));
    padding-inline: calc(19 / 853 * var(--lp-width));
  }

  .method-option {
    min-height: calc(420 / 853 * var(--lp-width));
    padding: calc(22 / 853 * var(--lp-width)) calc(13 / 853 * var(--lp-width)) calc(16 / 853 * var(--lp-width));
    border-width: calc(4 / 853 * var(--lp-width));
  }

  .method-recommend {
    top: calc(-22 / 853 * var(--lp-width));
    left: calc(-18 / 853 * var(--lp-width));
    width: calc(118 / 853 * var(--lp-width));
  }

  .method-icon {
    width: calc(132 / 853 * var(--lp-width));
    height: calc(112 / 853 * var(--lp-width));
    margin: calc(18 / 853 * var(--lp-width)) auto calc(8 / 853 * var(--lp-width));
  }

  .method-line-icon {
    width: calc(150 / 853 * var(--lp-width));
  }

  .method-phone-icon {
    width: calc(158 / 853 * var(--lp-width));
  }

  .method-option h2 {
    padding-bottom: calc(7 / 853 * var(--lp-width));
    font-size: calc(32 / 853 * var(--lp-width));
  }

  .method-web h2 {
    font-size: calc(34 / 853 * var(--lp-width));
  }

  .method-option p {
    margin: calc(10 / 853 * var(--lp-width)) 0 calc(14 / 853 * var(--lp-width));
    font-size: calc(18 / 853 * var(--lp-width));
  }

  .method-button {
    min-height: calc(52 / 853 * var(--lp-width));
    font-size: calc(25 / 853 * var(--lp-width));
  }

  .method-button::after {
    margin-left: calc(22 / 853 * var(--lp-width));
    font-size: calc(30 / 853 * var(--lp-width));
  }

  .compare-area {
    margin-top: calc(14 / 853 * var(--lp-width));
    padding-inline: calc(22 / 853 * var(--lp-width));
  }

  .compare-heading {
    width: calc(640 / 853 * var(--lp-width));
    margin-bottom: calc(-10 / 853 * var(--lp-width));
  }

  .compare-grid {
    grid-template-rows: calc(62 / 853 * var(--lp-width)) repeat(5, calc(104 / 853 * var(--lp-width)));
  }

  .compare-head {
    font-size: calc(25 / 853 * var(--lp-width));
  }

  .compare-item {
    gap: calc(8 / 853 * var(--lp-width));
    padding-left: calc(18 / 853 * var(--lp-width));
    font-size: calc(19 / 853 * var(--lp-width));
  }

  .compare-item img {
    width: calc(46 / 853 * var(--lp-width));
    height: calc(46 / 853 * var(--lp-width));
  }

  .compare-data {
    font-size: calc(19 / 853 * var(--lp-width));
  }

  .compare-data strong {
    font-size: calc(42 / 853 * var(--lp-width));
  }

  .compare-data span {
    font-size: calc(17 / 853 * var(--lp-width));
  }

  .compare-data.small {
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .compare-note {
    margin-top: calc(8 / 853 * var(--lp-width));
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .methods-bottom {
    height: calc(245 / 853 * var(--lp-width));
  }

  .methods-character {
    left: calc(5 / 853 * var(--lp-width));
    width: calc(184 / 853 * var(--lp-width));
  }

  .methods-balloon {
    left: calc(210 / 853 * var(--lp-width));
    bottom: calc(70 / 853 * var(--lp-width));
    width: calc(384 / 853 * var(--lp-width));
  }

  .methods-flag {
    right: calc(8 / 853 * var(--lp-width));
    bottom: calc(38 / 853 * var(--lp-width));
    width: calc(292 / 853 * var(--lp-width));
  }
}

/* User supplied washi/table art overlay pass. */
.compare-area {
  height: calc(612 / 853 * var(--lp-width));
  margin-top: calc(-42 / 853 * var(--lp-width));
  padding: 0 calc(21 / 853 * var(--lp-width));
  background: none;
}

.compare-table-art {
  position: relative;
  z-index: 6;
  display: block;
  width: calc(811 / 853 * var(--lp-width));
  height: calc(606 / 853 * var(--lp-width));
  margin: 0 auto;
  object-fit: fill;
  filter: drop-shadow(0 calc(4 / 853 * var(--lp-width)) calc(5 / 853 * var(--lp-width)) rgba(40, 18, 8, 0.24));
}

.compare-heading,
.compare-panel,
.compare-note {
  display: none;
}

.methods-bottom {
  height: calc(220 / 853 * var(--lp-width));
  margin-top: calc(2 / 853 * var(--lp-width));
}

.methods-character {
  left: 0;
  bottom: 0;
  width: calc(198 / 853 * var(--lp-width));
}

.methods-balloon {
  left: calc(218 / 853 * var(--lp-width));
  bottom: calc(70 / 853 * var(--lp-width));
  width: calc(372 / 853 * var(--lp-width));
}

.methods-flag {
  right: 0;
  bottom: calc(18 / 853 * var(--lp-width));
  width: calc(292 / 853 * var(--lp-width));
}

@media (max-width: 53.3125rem) {
  .compare-area {
    height: calc(612 / 853 * var(--lp-width));
    margin-top: calc(-42 / 853 * var(--lp-width));
    padding-inline: calc(21 / 853 * var(--lp-width));
    background-size: calc(805 / 853 * var(--lp-width)) calc(590 / 853 * var(--lp-width));
    background-position: center calc(18 / 853 * var(--lp-width));
  }

  .compare-table-art {
    width: calc(811 / 853 * var(--lp-width));
    height: calc(606 / 853 * var(--lp-width));
  }

  .methods-bottom {
    height: calc(220 / 853 * var(--lp-width));
    margin-top: calc(2 / 853 * var(--lp-width));
  }

  .methods-character {
    width: calc(198 / 853 * var(--lp-width));
  }

  .methods-balloon {
    left: calc(218 / 853 * var(--lp-width));
    bottom: calc(70 / 853 * var(--lp-width));
    width: calc(372 / 853 * var(--lp-width));
  }

  .methods-flag {
    bottom: calc(18 / 853 * var(--lp-width));
    width: calc(292 / 853 * var(--lp-width));
  }
}

/* Block-2 scale correction: larger washi, shorter cards, no lower overlap. */
.method-cards {
  margin-top: calc(-13 / 853 * var(--lp-width));
}

.method-option {
  min-height: calc(427 / 853 * var(--lp-width));
}

.method-option h2 {
  top: calc(228 / 853 * var(--lp-width));
}

.method-web h2 {
  top: calc(232 / 853 * var(--lp-width));
}

.method-option p {
  top: calc(287 / 853 * var(--lp-width));
}

.method-button {
  bottom: calc(28 / 853 * var(--lp-width));
}

.compare-area {
  height: calc(650 / 853 * var(--lp-width));
  margin-top: 0;
  padding: calc(12 / 853 * var(--lp-width)) calc(34 / 853 * var(--lp-width)) 0;
  background: none;
}

.compare-heading {
  width: calc(735 / 853 * var(--lp-width));
  height: calc(86 / 853 * var(--lp-width));
  margin: 0 auto calc(-4 / 853 * var(--lp-width));
  object-fit: fill;
}

.compare-panel {
  border-width: calc(2 / 853 * var(--lp-width));
}

.compare-grid {
  grid-template-rows: calc(54 / 853 * var(--lp-width)) repeat(5, calc(92 / 853 * var(--lp-width)));
}

.compare-head {
  font-size: calc(24 / 853 * var(--lp-width));
}

.compare-item {
  font-size: calc(18 / 853 * var(--lp-width));
}

.compare-data {
  font-size: calc(18 / 853 * var(--lp-width));
}

.compare-data strong {
  font-size: calc(40 / 853 * var(--lp-width));
}

.compare-data span {
  font-size: calc(16 / 853 * var(--lp-width));
}

.compare-data.small {
  font-size: calc(13 / 853 * var(--lp-width));
}

.compare-note {
  padding-top: calc(8 / 853 * var(--lp-width));
  font-size: calc(16 / 853 * var(--lp-width));
}

.methods-bottom {
  height: calc(236 / 853 * var(--lp-width));
  margin-top: calc(-4 / 853 * var(--lp-width));
}

.methods-character {
  left: 0;
  bottom: 0;
  width: calc(198 / 853 * var(--lp-width));
}

.methods-balloon {
  left: calc(214 / 853 * var(--lp-width));
  bottom: calc(74 / 853 * var(--lp-width));
  width: calc(376 / 853 * var(--lp-width));
}

.methods-flag {
  right: 0;
  bottom: calc(29 / 853 * var(--lp-width));
  width: calc(292 / 853 * var(--lp-width));
}

@media (max-width: 53.3125rem) {
  .method-cards {
    margin-top: calc(-13 / 853 * var(--lp-width));
  }

  .method-option {
    min-height: calc(427 / 853 * var(--lp-width));
  }

  .method-option h2 {
    top: calc(228 / 853 * var(--lp-width));
  }

  .method-web h2 {
    top: calc(232 / 853 * var(--lp-width));
  }

  .method-option p {
    top: calc(287 / 853 * var(--lp-width));
  }

  .method-button {
    bottom: calc(28 / 853 * var(--lp-width));
  }

  .compare-area {
    height: calc(650 / 853 * var(--lp-width));
    margin-top: 0;
    padding: calc(12 / 853 * var(--lp-width)) calc(34 / 853 * var(--lp-width)) 0;
    background-size: calc(835 / 853 * var(--lp-width)) calc(650 / 853 * var(--lp-width));
  }

  .compare-heading {
    width: calc(735 / 853 * var(--lp-width));
    height: calc(86 / 853 * var(--lp-width));
    margin-bottom: calc(-4 / 853 * var(--lp-width));
  }

  .compare-panel {
    border-width: calc(2 / 853 * var(--lp-width));
  }

  .compare-grid {
    grid-template-rows: calc(54 / 853 * var(--lp-width)) repeat(5, calc(92 / 853 * var(--lp-width)));
  }

  .compare-head {
    font-size: calc(24 / 853 * var(--lp-width));
  }

  .compare-item,
  .compare-data {
    font-size: calc(18 / 853 * var(--lp-width));
  }

  .compare-data strong {
    font-size: calc(40 / 853 * var(--lp-width));
  }

  .compare-data span {
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .compare-data.small {
    font-size: calc(13 / 853 * var(--lp-width));
  }

  .compare-note {
    padding-top: calc(8 / 853 * var(--lp-width));
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .methods-bottom {
    height: calc(236 / 853 * var(--lp-width));
    margin-top: calc(-4 / 853 * var(--lp-width));
  }

  .methods-character {
    width: calc(198 / 853 * var(--lp-width));
  }

  .methods-balloon {
    left: calc(214 / 853 * var(--lp-width));
    bottom: calc(74 / 853 * var(--lp-width));
    width: calc(376 / 853 * var(--lp-width));
  }

  .methods-flag {
    bottom: calc(29 / 853 * var(--lp-width));
    width: calc(292 / 853 * var(--lp-width));
  }
}

/* Correction: do not stretch generated table text; use washi as the base and keep table text editable. */
.compare-area {
  height: calc(586 / 853 * var(--lp-width));
  margin-top: calc(-22 / 853 * var(--lp-width));
  padding: calc(16 / 853 * var(--lp-width)) calc(40 / 853 * var(--lp-width)) 0;
  background: none;
}

.compare-table-art {
  display: none;
}

.compare-heading {
  display: block;
  position: relative;
  z-index: 6;
  width: calc(708 / 853 * var(--lp-width));
  height: calc(106 / 853 * var(--lp-width));
  margin: 0 auto calc(-8 / 853 * var(--lp-width));
  object-fit: fill;
}

.compare-panel {
  display: block;
  position: relative;
  z-index: 6;
  overflow: hidden;
  border: calc(2 / 853 * var(--lp-width)) solid rgba(42, 28, 17, 0.78);
  border-radius: calc(7 / 853 * var(--lp-width));
  background: rgba(255, 249, 230, 0.92);
  box-shadow: 0 calc(3 / 853 * var(--lp-width)) calc(4 / 853 * var(--lp-width)) rgba(45, 20, 8, 0.26);
}

.compare-grid {
  grid-template-rows: calc(48 / 853 * var(--lp-width)) repeat(5, calc(76 / 853 * var(--lp-width)));
}

.compare-head {
  font-size: calc(24 / 853 * var(--lp-width));
}

.compare-item {
  padding-left: calc(15 / 853 * var(--lp-width));
  font-size: calc(18 / 853 * var(--lp-width));
}

.compare-item img {
  width: calc(42 / 853 * var(--lp-width));
  height: calc(42 / 853 * var(--lp-width));
}

.compare-data {
  font-size: calc(18 / 853 * var(--lp-width));
}

.compare-data strong {
  font-size: calc(38 / 853 * var(--lp-width));
}

.compare-data span {
  font-size: calc(13 / 853 * var(--lp-width));
}

.compare-data.small {
  font-size: calc(13 / 853 * var(--lp-width));
  line-height: 1.35;
}

.compare-note {
  display: block;
  position: relative;
  z-index: 6;
  margin: 0;
  padding: calc(8 / 853 * var(--lp-width)) calc(8 / 853 * var(--lp-width)) 0;
  color: #2d2018 !important;
  background: transparent;
  border: 0;
  font-size: calc(16 / 853 * var(--lp-width));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.methods-bottom {
  height: calc(218 / 853 * var(--lp-width));
  margin-top: calc(6 / 853 * var(--lp-width));
}

.methods-character {
  left: 0;
  bottom: 0;
  width: calc(192 / 853 * var(--lp-width));
}

.methods-balloon {
  left: calc(215 / 853 * var(--lp-width));
  bottom: calc(56 / 853 * var(--lp-width));
  width: calc(374 / 853 * var(--lp-width));
}

.methods-flag {
  right: 0;
  bottom: calc(12 / 853 * var(--lp-width));
  width: calc(292 / 853 * var(--lp-width));
}

@media (max-width: 53.3125rem) {
  .compare-area {
    height: calc(586 / 853 * var(--lp-width));
    margin-top: calc(-22 / 853 * var(--lp-width));
    padding: calc(16 / 853 * var(--lp-width)) calc(40 / 853 * var(--lp-width)) 0;
    background-size: calc(808 / 853 * var(--lp-width)) calc(586 / 853 * var(--lp-width));
  }

  .compare-heading {
    width: calc(708 / 853 * var(--lp-width));
    height: calc(106 / 853 * var(--lp-width));
    margin-bottom: calc(-8 / 853 * var(--lp-width));
  }

  .compare-panel {
    border-width: calc(2 / 853 * var(--lp-width));
    border-radius: calc(7 / 853 * var(--lp-width));
  }

  .compare-grid {
    grid-template-rows: calc(48 / 853 * var(--lp-width)) repeat(5, calc(76 / 853 * var(--lp-width)));
  }

  .compare-head {
    font-size: calc(24 / 853 * var(--lp-width));
  }

  .compare-item {
    padding-left: calc(15 / 853 * var(--lp-width));
    font-size: calc(18 / 853 * var(--lp-width));
  }

  .compare-item img {
    width: calc(42 / 853 * var(--lp-width));
    height: calc(42 / 853 * var(--lp-width));
  }

  .compare-data {
    font-size: calc(18 / 853 * var(--lp-width));
  }

  .compare-data strong {
    font-size: calc(38 / 853 * var(--lp-width));
  }

  .compare-data span,
  .compare-data.small {
    font-size: calc(13 / 853 * var(--lp-width));
  }

  .compare-note {
    padding: calc(8 / 853 * var(--lp-width)) calc(8 / 853 * var(--lp-width)) 0;
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .methods-bottom {
    height: calc(218 / 853 * var(--lp-width));
    margin-top: calc(6 / 853 * var(--lp-width));
  }

  .methods-character {
    width: calc(192 / 853 * var(--lp-width));
  }

  .methods-balloon {
    left: calc(215 / 853 * var(--lp-width));
    bottom: calc(56 / 853 * var(--lp-width));
    width: calc(374 / 853 * var(--lp-width));
  }

  .methods-flag {
    bottom: calc(12 / 853 * var(--lp-width));
    width: calc(292 / 853 * var(--lp-width));
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #1a120d;
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Times New Roman", serif;
}

img {
  display: block;
  max-width: 100%;
}

.lp {
  width: min(100%, var(--lp-width));
  margin: 0 auto;
  overflow: hidden;
  background: #f4dfac;
  box-shadow: 0 0 calc(32 / 853 * var(--lp-width)) rgba(0, 0, 0, 0.5);
}

.hero-block {
  position: relative;
  height: calc(1750 / 853 * var(--lp-width));
  overflow: hidden;
  background:
    url("./assets/clean/asset-05.webp") center 9.8% / 111% auto no-repeat,
    linear-gradient(180deg, #ead09a 0%, #f6d288 58%, #ca7a29 100%);
}

.hero-block::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 78%, rgba(255, 236, 143, 0.75), rgba(255, 236, 143, 0) 19%),
    radial-gradient(circle at 50% 56%, rgba(250, 119, 34, 0.28), rgba(250, 119, 34, 0) 27%),
    linear-gradient(180deg, rgba(85, 42, 16, 0) 0 64%, rgba(115, 61, 20, 0.38) 80%, rgba(38, 18, 9, 0.45) 100%);
  mix-blend-mode: multiply;
}

.hero-top {
  position: relative;
  z-index: 2;
  height: calc(224 / 853 * var(--lp-width));
  padding-top: 0;
  background: transparent;
  border-bottom: 0;
}

.hero-logo {
  position: absolute;
  z-index: 2;
  top: calc(30 / 853 * var(--lp-width));
  left: calc(36 / 853 * var(--lp-width));
  width: calc(302 / 853 * var(--lp-width));
  filter: drop-shadow(0 calc(5 / 853 * var(--lp-width)) calc(3 / 853 * var(--lp-width)) rgba(94, 31, 9, 0.35));
}

.hero-reception {
  position: absolute;
  z-index: 2;
  top: calc(54 / 853 * var(--lp-width));
  right: calc(77 / 853 * var(--lp-width));
  width: calc(258 / 853 * var(--lp-width));
}

.hero-curtain {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(-56 / 853 * var(--lp-width));
  bottom: auto;
  width: calc(920 / 853 * var(--lp-width));
  max-width: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 calc(8 / 853 * var(--lp-width)) calc(5 / 853 * var(--lp-width)) rgba(80, 22, 5, 0.35));
}

.hero-stage {
  position: absolute;
  top: calc(224 / 853 * var(--lp-width));
  /* 224 → 150 に変更 */
  left: 0;
  right: 0;
  bottom: calc(394 / 853 * var(--lp-width));
  z-index: 2;
}

.hero-warrior {
  position: absolute;
  top: calc(20 / 853 * var(--lp-width));
  left: 50%;
  width: calc(770 / 853 * var(--lp-width));
  max-width: none;
  transform: translateX(-47%);
  filter: drop-shadow(0 calc(12 / 853 * var(--lp-width)) calc(5 / 853 * var(--lp-width)) rgba(66, 25, 6, 0.45));
}

.hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(580 / 853 * var(--lp-width));
  display: grid;
  justify-items: center;
  gap: calc(2 / 853 * var(--lp-width));
  padding: 0 calc(24 / 853 * var(--lp-width));
}

.hero-title {
  width: calc(858 / 853 * var(--lp-width));
  filter: drop-shadow(0 calc(4 / 853 * var(--lp-width)) calc(1 / 853 * var(--lp-width)) rgba(255, 238, 170, 0.75)) drop-shadow(0 calc(7 / 853 * var(--lp-width)) calc(4 / 853 * var(--lp-width)) rgba(71, 23, 7, 0.35));
}

.hero-subcopy {
  width: calc(585 / 853 * var(--lp-width));
  filter: drop-shadow(0 calc(2 / 853 * var(--lp-width)) calc(1 / 853 * var(--lp-width)) rgba(255, 250, 218, 0.85));
}

.hero-badges {
  position: absolute;
  left: calc(18 / 853 * var(--lp-width));
  right: calc(18 / 853 * var(--lp-width));
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: calc(8 / 853 * var(--lp-width));
  padding: 0;
  align-items: end;
}

.badge-card {
  position: relative;
  width: calc((100% - calc(16 / 853 * var(--lp-width))) / 3);
  flex: 0 0 calc((100% - calc(16 / 853 * var(--lp-width))) / 3);
  margin: 0;
  min-width: 0;
  filter: drop-shadow(0 calc(8 / 853 * var(--lp-width)) calc(5 / 853 * var(--lp-width)) rgba(43, 12, 4, 0.36));
}

.badge-bg {
  width: 100%;
  aspect-ratio: 971 / 1619;
  object-fit: contain;
  object-position: center bottom;
}

.badge-value {
  position: absolute;
  left: 50%;
  top: 60.5%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 92%;
  color: #f2c24f;
  font-family: "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.05em;
  transform: translateX(-50%);
  -webkit-text-stroke: calc(2 / 853 * var(--lp-width)) #5c2705;
  text-shadow:
    0 calc(-2 / 853 * var(--lp-width)) 0 rgba(255, 247, 177, 0.75),
    0 calc(2 / 853 * var(--lp-width)) 0 #7c3c08,
    0 calc(5 / 853 * var(--lp-width)) 0 #3e1704,
    0 calc(9 / 853 * var(--lp-width)) calc(8 / 853 * var(--lp-width)) rgba(0, 0, 0, 0.58);
  white-space: nowrap;
}

.badge-number {
  font-size: calc(112 / 853 * var(--lp-width));
}

.badge-unit {
  margin-left: 0.02em;
  padding-bottom: calc(10 / 853 * var(--lp-width));
  font-size: calc(42 / 853 * var(--lp-width));
}

.badge-speed .badge-value {
  top: 60.5%;
}

.badge-fee .badge-value {
  left: 53%;
  top: 63.5%;
}

.badge-fee .badge-number {
  font-size: calc(148 / 853 * var(--lp-width));
}

.badge-fee .badge-unit {
  padding-bottom: calc(16 / 853 * var(--lp-width));
  font-size: calc(54 / 853 * var(--lp-width));
}

.methods-block {
  position: relative;
  height: calc(1840 / 853 * var(--lp-width));
  overflow: hidden;
  padding-top: calc(8 / 853 * var(--lp-width));
  background:
    url("./assets/provided/methods-bg.webp") center center / cover no-repeat,
    radial-gradient(circle at 50% 6%, rgba(255, 224, 153, 0.95), rgba(218, 139, 66, 0.55) 22%, rgba(75, 39, 20, 0) 43%),
    radial-gradient(circle at 50% 78%, rgba(255, 211, 92, 0.35), rgba(255, 211, 92, 0) 30%),
    linear-gradient(180deg, #d48a43 0%, #f3d294 12%, #c48648 49%, #f4e1ba 52%, #613516 100%);
}

.methods-block::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(39, 23, 12, 0.36), rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 82%, rgba(39, 23, 12, 0.36)),
    radial-gradient(circle at 50% 100%, rgba(18, 11, 7, 0.85), rgba(18, 11, 7, 0) 35%);
  mix-blend-mode: multiply;
}

.methods-title {
  position: relative;
  z-index: 2;
  width: calc(820 / 853 * var(--lp-width));
  margin: 0 auto;
  filter: drop-shadow(0 calc(5 / 853 * var(--lp-width)) calc(4 / 853 * var(--lp-width)) rgba(54, 25, 8, 0.42));
}

.methods-rope {
  position: absolute;
  z-index: 3;
  top: calc(138 / 853 * var(--lp-width));
  left: 50%;
  width: calc(760 / 853 * var(--lp-width));
  max-width: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 calc(5 / 853 * var(--lp-width)) calc(4 / 853 * var(--lp-width)) rgba(66, 24, 8, 0.46));
}

.method-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(7 / 853 * var(--lp-width));
  padding: 0 calc(18 / 853 * var(--lp-width));
  margin-top: calc(-12 / 853 * var(--lp-width));
}

.method-card {
  width: 100%;
  filter: drop-shadow(0 calc(8 / 853 * var(--lp-width)) calc(5 / 853 * var(--lp-width)) rgba(52, 24, 8, 0.38));
}

.method-card-web {
  transform: translateY(calc(-2 / 853 * var(--lp-width)));
}

.compare-area {
  position: relative;
  z-index: 3;
  margin-top: calc(-6 / 853 * var(--lp-width));
  padding: 0 calc(22 / 853 * var(--lp-width));
}

.compare-heading {
  position: relative;
  z-index: 2;
  width: calc(650 / 853 * var(--lp-width));
  margin: 0 auto calc(-15 / 853 * var(--lp-width));
  filter: drop-shadow(0 calc(4 / 853 * var(--lp-width)) calc(3 / 853 * var(--lp-width)) rgba(38, 17, 6, 0.42));
}

.compare-table-wrap {
  position: relative;
  width: 100%;
  height: calc(620 / 853 * var(--lp-width));
  filter: drop-shadow(0 calc(8 / 853 * var(--lp-width)) calc(5 / 853 * var(--lp-width)) rgba(48, 21, 5, 0.36));
}

.compare-table-bg {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.compare-label,
.compare-cell {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #3d2719;
  font-weight: 900;
  line-height: 1.34;
  text-shadow: 0 calc(1 / 853 * var(--lp-width)) 0 rgba(255, 255, 255, 0.7);
}

.compare-label {
  left: 17.4%;
  width: 6.6%;
  justify-content: flex-start;
  font-size: calc(17 / 853 * var(--lp-width));
  text-align: left;
}

.compare-label-time {
  top: 14.8%;
  height: 13.3%;
}

.compare-label-speed {
  top: 29.4%;
  height: 13.3%;
}

.compare-label-ease {
  top: 44.1%;
  height: 13.3%;
}

.compare-label-support {
  top: 58.8%;
  height: 13.3%;
  font-size: calc(13 / 853 * var(--lp-width));
}

.compare-label-recommend {
  top: 73.4%;
  height: 13.3%;
}

.compare-cell {
  width: 24.6%;
  height: 13.3%;
  font-size: calc(18 / 853 * var(--lp-width));
}

.compare-cell.web {
  left: 25.2%;
  color: #b1131c;
}

.compare-cell.line {
  left: 50.1%;
  color: #dd6b0f;
}

.compare-cell.phone {
  left: 75%;
  color: #a67409;
}

.row-time {
  top: 14.8%;
}

.row-speed {
  top: 29.4%;
}

.row-ease {
  top: 44.1%;
}

.row-support {
  top: 58.8%;
}

.row-recommend {
  top: 73.4%;
  font-size: calc(16 / 853 * var(--lp-width));
}

.compare-cell strong {
  font-size: calc(46 / 853 * var(--lp-width));
  line-height: 0.95;
}

.compare-note {
  margin: calc(5 / 853 * var(--lp-width)) 0 0;
  color: #342318;
  font-size: calc(17 / 853 * var(--lp-width));
  font-weight: 700;
  text-align: center;
}

.methods-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: calc(305 / 853 * var(--lp-width));
}

.methods-character {
  position: absolute;
  left: calc(8 / 853 * var(--lp-width));
  bottom: 0;
  width: calc(190 / 853 * var(--lp-width));
  filter: drop-shadow(0 calc(8 / 853 * var(--lp-width)) calc(5 / 853 * var(--lp-width)) rgba(31, 12, 5, 0.44));
}

.methods-balloon {
  position: absolute;
  left: calc(210 / 853 * var(--lp-width));
  bottom: calc(92 / 853 * var(--lp-width));
  width: calc(390 / 853 * var(--lp-width));
  filter: drop-shadow(0 calc(6 / 853 * var(--lp-width)) calc(4 / 853 * var(--lp-width)) rgba(54, 25, 8, 0.4));
}

.methods-flag {
  position: absolute;
  right: calc(10 / 853 * var(--lp-width));
  bottom: calc(22 / 853 * var(--lp-width));
  width: calc(290 / 853 * var(--lp-width));
  filter: drop-shadow(0 calc(7 / 853 * var(--lp-width)) calc(5 / 853 * var(--lp-width)) rgba(41, 15, 6, 0.44));
}

@media (max-width: 53.3125rem) {
  .lp {
    width: 100%;
  }

  .hero-block {
    height: calc(1750 / 853 * var(--lp-width));
  }

  .hero-top {
    height: calc(224 / 853 * var(--lp-width));
    padding-top: calc(24 / 853 * var(--lp-width));
  }

  .hero-logo {
    top: calc(30 / 853 * var(--lp-width));
    left: calc(36 / 853 * var(--lp-width));
    width: calc(302 / 853 * var(--lp-width));
  }

  .hero-reception {
    top: calc(54 / 853 * var(--lp-width));
    right: calc(77 / 853 * var(--lp-width));
    width: calc(258 / 853 * var(--lp-width));
  }

  .hero-curtain {
    top: calc(-56 / 853 * var(--lp-width));
    width: calc(920 / 853 * var(--lp-width));
  }

  .hero-stage {
    top: calc(224 / 853 * var(--lp-width));
    bottom: calc(394 / 853 * var(--lp-width));
  }

  .hero-warrior {
    top: calc(20 / 853 * var(--lp-width));
    width: calc(770 / 853 * var(--lp-width));
  }

  .hero-copy {
    top: calc(580 / 853 * var(--lp-width));
    gap: calc(2 / 853 * var(--lp-width));
    padding-inline: calc(24 / 853 * var(--lp-width));
  }

  .hero-title {
    width: calc(858 / 853 * var(--lp-width));
  }

  .hero-subcopy {
    width: calc(585 / 853 * var(--lp-width));
  }

  .hero-badges {
    left: calc(18 / 853 * var(--lp-width));
    right: calc(18 / 853 * var(--lp-width));
    bottom: 0;
    gap: calc(8 / 853 * var(--lp-width));
    padding: 0;
  }

  .badge-card {
    margin: 0;
  }

  .badge-number {
    font-size: calc(112 / 853 * var(--lp-width));
  }

  .badge-fee .badge-number {
    font-size: calc(148 / 853 * var(--lp-width));
  }

  .badge-unit {
    padding-bottom: calc(10 / 853 * var(--lp-width));
    font-size: calc(42 / 853 * var(--lp-width));
  }

  .badge-fee .badge-unit {
    padding-bottom: calc(16 / 853 * var(--lp-width));
    font-size: calc(54 / 853 * var(--lp-width));
  }

  .methods-block {
    height: calc(1840 / 853 * var(--lp-width));
    padding-top: calc(8 / 853 * var(--lp-width));
  }

  .methods-title {
    width: calc(820 / 853 * var(--lp-width));
  }

  .methods-rope {
    top: calc(138 / 853 * var(--lp-width));
    width: calc(760 / 853 * var(--lp-width));
  }

  .method-cards {
    gap: calc(7 / 853 * var(--lp-width));
    padding-inline: calc(18 / 853 * var(--lp-width));
    margin-top: calc(-12 / 853 * var(--lp-width));
  }

  .method-card-web {
    transform: translateY(calc(-2 / 853 * var(--lp-width)));
  }

  .compare-area {
    margin-top: calc(-6 / 853 * var(--lp-width));
    padding-inline: calc(22 / 853 * var(--lp-width));
  }

  .compare-heading {
    width: calc(650 / 853 * var(--lp-width));
    margin-bottom: calc(-15 / 853 * var(--lp-width));
  }

  .compare-label {
    font-size: calc(17 / 853 * var(--lp-width));
  }

  .compare-label-support {
    font-size: calc(13 / 853 * var(--lp-width));
  }

  .compare-table-wrap {
    height: calc(620 / 853 * var(--lp-width));
  }

  .compare-cell {
    font-size: calc(18 / 853 * var(--lp-width));
  }

  .row-recommend {
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .compare-cell strong {
    font-size: calc(46 / 853 * var(--lp-width));
  }

  .compare-note {
    margin-top: calc(5 / 853 * var(--lp-width));
    font-size: calc(17 / 853 * var(--lp-width));
  }

  .methods-bottom {
    height: calc(305 / 853 * var(--lp-width));
  }

  .methods-character {
    left: calc(8 / 853 * var(--lp-width));
    width: calc(190 / 853 * var(--lp-width));
  }

  .methods-balloon {
    left: calc(210 / 853 * var(--lp-width));
    bottom: calc(92 / 853 * var(--lp-width));
    width: calc(390 / 853 * var(--lp-width));
  }

  .methods-flag {
    right: calc(10 / 853 * var(--lp-width));
    bottom: calc(22 / 853 * var(--lp-width));
    width: calc(290 / 853 * var(--lp-width));
  }
}

/* Final block 2 override: editable reconstruction */
.methods-block {
  height: calc(1516 / 853 * var(--lp-width));
  padding-top: 0;
  background:
    url("./assets/provided/methods-bg.webp") center center / cover no-repeat,
    linear-gradient(180deg, #e0a85f 0%, #f2d5a5 54%, #3b1f11 100%);
}

.methods-title {
  width: calc(828 / 853 * var(--lp-width));
  padding-top: 0;
}

.methods-rope {
  top: calc(117 / 853 * var(--lp-width));
  width: calc(765 / 853 * var(--lp-width));
}

.method-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(8 / 853 * var(--lp-width));
  margin-top: calc(-20 / 853 * var(--lp-width));
  padding: 0 calc(19 / 853 * var(--lp-width));
}

.method-option {
  position: relative;
  min-height: calc(420 / 853 * var(--lp-width));
  padding: calc(22 / 853 * var(--lp-width)) calc(13 / 853 * var(--lp-width)) calc(16 / 853 * var(--lp-width));
  border: calc(4 / 853 * var(--lp-width)) solid #b67a20;
  border-radius: calc(6 / 853 * var(--lp-width));
  background:
    linear-gradient(180deg, rgba(255, 252, 230, 0.94), rgba(246, 221, 171, 0.94)),
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 52%);
  box-shadow:
    inset 0 0 0 calc(2 / 853 * var(--lp-width)) rgba(255, 245, 190, 0.82),
    inset 0 0 calc(20 / 853 * var(--lp-width)) rgba(121, 73, 16, 0.18),
    0 calc(8 / 853 * var(--lp-width)) calc(7 / 853 * var(--lp-width)) rgba(50, 20, 5, 0.38);
  text-align: center;
}

.method-option::before,
.method-option::after {
  content: "";
  position: absolute;
  width: calc(38 / 853 * var(--lp-width));
  height: calc(38 / 853 * var(--lp-width));
  border-color: #d8a13e;
  border-style: solid;
  pointer-events: none;
}

.method-option::before {
  top: calc(9 / 853 * var(--lp-width));
  left: calc(9 / 853 * var(--lp-width));
  border-width: calc(4 / 853 * var(--lp-width)) 0 0 calc(4 / 853 * var(--lp-width));
  border-radius: calc(8 / 853 * var(--lp-width)) 0 0 0;
}

.method-option::after {
  right: calc(9 / 853 * var(--lp-width));
  bottom: calc(9 / 853 * var(--lp-width));
  border-width: 0 calc(4 / 853 * var(--lp-width)) calc(4 / 853 * var(--lp-width)) 0;
  border-radius: 0 0 calc(8 / 853 * var(--lp-width)) 0;
}

.method-recommend {
  position: absolute;
  top: calc(-22 / 853 * var(--lp-width));
  left: calc(-18 / 853 * var(--lp-width));
  z-index: 3;
  width: calc(118 / 853 * var(--lp-width));
  filter: drop-shadow(0 calc(4 / 853 * var(--lp-width)) calc(3 / 853 * var(--lp-width)) rgba(70, 20, 5, 0.42));
}

.method-icon {
  width: calc(132 / 853 * var(--lp-width));
  height: calc(112 / 853 * var(--lp-width));
  margin: calc(18 / 853 * var(--lp-width)) auto calc(8 / 853 * var(--lp-width));
  object-fit: contain;
  mix-blend-mode: multiply;
}

.method-line-icon {
  width: calc(150 / 853 * var(--lp-width));
}

.method-phone-icon {
  width: calc(158 / 853 * var(--lp-width));
}

.method-option h2 {
  margin: 0;
  padding-bottom: calc(7 / 853 * var(--lp-width));
  border-bottom: calc(2 / 853 * var(--lp-width)) solid rgba(103, 75, 35, 0.48);
  color: #2c221a;
  font-size: calc(32 / 853 * var(--lp-width));
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 0 calc(1 / 853 * var(--lp-width)) 0 rgba(255, 255, 255, 0.9);
}

.method-web h2 {
  color: #8f1116;
  font-size: calc(34 / 853 * var(--lp-width));
  font-family: Georgia, "Times New Roman", "Yu Mincho", serif;
}

.method-option p {
  margin: calc(10 / 853 * var(--lp-width)) 0 calc(14 / 853 * var(--lp-width));
  color: #2c2118;
  font-size: calc(18 / 853 * var(--lp-width));
  font-weight: 900;
  line-height: 1.45;
}

.method-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(52 / 853 * var(--lp-width));
  border-radius: calc(8 / 853 * var(--lp-width));
  color: #fff;
  font-size: calc(25 / 853 * var(--lp-width));
  font-weight: 900;
  text-decoration: none;
  box-shadow:
    inset 0 calc(2 / 853 * var(--lp-width)) 0 rgba(255, 255, 255, 0.42),
    inset 0 calc(-4 / 853 * var(--lp-width)) 0 rgba(74, 34, 6, 0.28),
    0 calc(4 / 853 * var(--lp-width)) calc(5 / 853 * var(--lp-width)) rgba(57, 24, 5, 0.34);
  text-shadow: 0 calc(2 / 853 * var(--lp-width)) calc(2 / 853 * var(--lp-width)) rgba(60, 18, 4, 0.65);
}

.method-button::after {
  content: ">";
  margin-left: calc(22 / 853 * var(--lp-width));
  font-family: Arial, sans-serif;
  font-size: calc(30 / 853 * var(--lp-width));
}

.method-button.red {
  background: linear-gradient(180deg, #f02b28, #a80d12);
}

.method-button.orange {
  background: linear-gradient(180deg, #ff981f, #d85302);
}

.method-button.gold {
  background: linear-gradient(180deg, #dfb72d, #9f7109);
}

.compare-area {
  margin-top: calc(14 / 853 * var(--lp-width));
  padding: 0 calc(22 / 853 * var(--lp-width));
}

.compare-heading {
  width: calc(640 / 853 * var(--lp-width));
  margin-bottom: calc(-10 / 853 * var(--lp-width));
}

.compare-panel {
  position: relative;
  overflow: hidden;
  border: calc(5 / 853 * var(--lp-width)) solid #14100d;
  border-radius: calc(2 / 853 * var(--lp-width));
  background:
    linear-gradient(180deg, rgba(255, 249, 225, 0.96), rgba(248, 223, 178, 0.96)),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 72%);
  box-shadow: 0 calc(9 / 853 * var(--lp-width)) calc(7 / 853 * var(--lp-width)) rgba(35, 15, 5, 0.42);
}

.compare-grid {
  display: grid;
  grid-template-columns: 26% 24.7% 24.7% 24.6%;
  grid-template-rows: calc(62 / 853 * var(--lp-width)) repeat(5, calc(104 / 853 * var(--lp-width)));
  border: calc(1 / 853 * var(--lp-width)) solid rgba(171, 131, 73, 0.56);
}

.compare-head,
.compare-item,
.compare-data {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: calc(1 / 853 * var(--lp-width)) solid rgba(171, 131, 73, 0.56);
  border-bottom: calc(1 / 853 * var(--lp-width)) solid rgba(171, 131, 73, 0.56);
  text-align: center;
  font-weight: 900;
  line-height: 1.28;
}

.compare-head {
  color: #fff;
  font-size: calc(25 / 853 * var(--lp-width));
  text-shadow: 0 calc(2 / 853 * var(--lp-width)) calc(2 / 853 * var(--lp-width)) rgba(36, 16, 5, 0.7);
  box-shadow: inset 0 calc(2 / 853 * var(--lp-width)) 0 rgba(255, 242, 178, 0.35);
}

.compare-head.item {
  background: linear-gradient(180deg, #61452d, #2e2118);
}

.compare-head.web {
  background: linear-gradient(180deg, #c51924, #8f0c12);
}

.compare-head.line {
  background: linear-gradient(180deg, #ee7915, #c65304);
}

.compare-head.phone {
  background: linear-gradient(180deg, #c3931a, #8d6509);
}

.compare-item {
  gap: calc(8 / 853 * var(--lp-width));
  justify-content: flex-start;
  padding-left: calc(18 / 853 * var(--lp-width));
  color: #3f2b1f;
  font-size: calc(19 / 853 * var(--lp-width));
}

.compare-item img {
  width: calc(46 / 853 * var(--lp-width));
  height: calc(46 / 853 * var(--lp-width));
  object-fit: contain;
}

.compare-data {
  flex-direction: column;
  color: #3d2a1c;
  font-size: calc(19 / 853 * var(--lp-width));
}

.compare-data.web {
  color: #b0121a;
}

.compare-data.line {
  color: #dc6410;
}

.compare-data.phone {
  color: #9b720b;
}

.compare-data strong {
  font-size: calc(42 / 853 * var(--lp-width));
  line-height: 0.95;
  font-family: "Times New Roman", serif;
}

.compare-data span {
  margin-top: calc(2 / 853 * var(--lp-width));
  font-size: calc(17 / 853 * var(--lp-width));
}

.compare-data.small {
  padding: 0 calc(6 / 853 * var(--lp-width));
  font-size: calc(16 / 853 * var(--lp-width));
}

.compare-note {
  margin-top: calc(8 / 853 * var(--lp-width));
  font-size: calc(16 / 853 * var(--lp-width));
}

.methods-bottom {
  height: calc(245 / 853 * var(--lp-width));
}

.methods-character {
  left: calc(5 / 853 * var(--lp-width));
  width: calc(184 / 853 * var(--lp-width));
}

.methods-balloon {
  left: calc(210 / 853 * var(--lp-width));
  bottom: calc(70 / 853 * var(--lp-width));
  width: calc(384 / 853 * var(--lp-width));
}

.methods-flag {
  right: calc(8 / 853 * var(--lp-width));
  bottom: calc(38 / 853 * var(--lp-width));
  width: calc(292 / 853 * var(--lp-width));
}

@media (max-width: 53.3125rem) {
  .methods-block {
    height: calc(1900 / 853 * var(--lp-width));
  }

  .methods-title {
    width: calc(828 / 853 * var(--lp-width));
  }

  .methods-rope {
    top: calc(117 / 853 * var(--lp-width));
    width: calc(765 / 853 * var(--lp-width));
  }

  .method-cards {
    gap: calc(8 / 853 * var(--lp-width));
    margin-top: calc(-20 / 853 * var(--lp-width));
    padding-inline: calc(19 / 853 * var(--lp-width));
  }

  .method-option {
    min-height: calc(420 / 853 * var(--lp-width));
    padding: calc(22 / 853 * var(--lp-width)) calc(13 / 853 * var(--lp-width)) calc(16 / 853 * var(--lp-width));
    border-width: calc(4 / 853 * var(--lp-width));
  }

  .method-recommend {
    top: calc(-22 / 853 * var(--lp-width));
    left: calc(-18 / 853 * var(--lp-width));
    width: calc(118 / 853 * var(--lp-width));
  }

  .method-icon {
    width: calc(132 / 853 * var(--lp-width));
    height: calc(112 / 853 * var(--lp-width));
    margin: calc(18 / 853 * var(--lp-width)) auto calc(8 / 853 * var(--lp-width));
  }

  .method-line-icon {
    width: calc(150 / 853 * var(--lp-width));
  }

  .method-phone-icon {
    width: calc(158 / 853 * var(--lp-width));
  }

  .method-option h2 {
    padding-bottom: calc(7 / 853 * var(--lp-width));
    font-size: calc(32 / 853 * var(--lp-width));
  }

  .method-web h2 {
    font-size: calc(34 / 853 * var(--lp-width));
  }

  .method-option p {
    margin: calc(10 / 853 * var(--lp-width)) 0 calc(14 / 853 * var(--lp-width));
    font-size: calc(18 / 853 * var(--lp-width));
  }

  .method-button {
    min-height: calc(52 / 853 * var(--lp-width));
    font-size: calc(25 / 853 * var(--lp-width));
  }

  .method-button::after {
    margin-left: calc(22 / 853 * var(--lp-width));
    font-size: calc(30 / 853 * var(--lp-width));
  }

  .compare-area {
    margin-top: calc(14 / 853 * var(--lp-width));
    padding-inline: calc(22 / 853 * var(--lp-width));
  }

  .compare-heading {
    width: calc(640 / 853 * var(--lp-width));
    margin-bottom: calc(-10 / 853 * var(--lp-width));
  }

  .compare-grid {
    grid-template-rows: calc(62 / 853 * var(--lp-width)) repeat(5, calc(104 / 853 * var(--lp-width)));
  }

  .compare-head {
    font-size: calc(25 / 853 * var(--lp-width));
  }

  .compare-item {
    gap: calc(8 / 853 * var(--lp-width));
    padding-left: calc(18 / 853 * var(--lp-width));
    font-size: calc(19 / 853 * var(--lp-width));
  }

  .compare-item img {
    width: calc(46 / 853 * var(--lp-width));
    height: calc(46 / 853 * var(--lp-width));
  }

  .compare-data {
    font-size: calc(19 / 853 * var(--lp-width));
  }

  .compare-data strong {
    font-size: calc(42 / 853 * var(--lp-width));
  }

  .compare-data span {
    font-size: calc(17 / 853 * var(--lp-width));
  }

  .compare-data.small {
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .compare-note {
    margin-top: calc(8 / 853 * var(--lp-width));
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .methods-bottom {
    height: calc(245 / 853 * var(--lp-width));
  }

  .methods-character {
    left: calc(5 / 853 * var(--lp-width));
    width: calc(184 / 853 * var(--lp-width));
  }

  .methods-balloon {
    left: calc(210 / 853 * var(--lp-width));
    bottom: calc(70 / 853 * var(--lp-width));
    width: calc(384 / 853 * var(--lp-width));
  }

  .methods-flag {
    right: calc(8 / 853 * var(--lp-width));
    bottom: calc(38 / 853 * var(--lp-width));
    width: calc(292 / 853 * var(--lp-width));
  }
}

/* User supplied method card bases */
.method-option {
  min-height: calc(420 / 853 * var(--lp-width));
  padding: 0;
  border: 0;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  box-shadow: 0 calc(8 / 853 * var(--lp-width)) calc(7 / 853 * var(--lp-width)) rgba(50, 20, 5, 0.38);
}

.method-option::before,
.method-option::after,
.method-icon,
.method-recommend {
  display: none;
}

.method-web {
  background-image: url("./assets/clean/asset-013.webp");
}

.method-line {
  background-image: url("./assets/clean/asset-014.webp");
}

.method-phone {
  background-image: url("./assets/clean/asset-015.webp");
}

.method-option h2 {
  position: absolute;
  left: calc(22 / 853 * var(--lp-width));
  right: calc(22 / 853 * var(--lp-width));
  top: calc(215 / 853 * var(--lp-width));
  margin: 0;
  padding: 0 0 calc(8 / 853 * var(--lp-width));
  border-bottom: calc(2 / 853 * var(--lp-width)) solid rgba(85, 55, 25, 0.55);
  color: #2f261f;
  font-size: calc(32 / 853 * var(--lp-width));
  line-height: 1.05;
}

.method-web h2 {
  top: calc(220 / 853 * var(--lp-width));
  color: #8f1116;
  font-size: calc(34 / 853 * var(--lp-width));
}

.method-option p {
  position: absolute;
  left: calc(20 / 853 * var(--lp-width));
  right: calc(20 / 853 * var(--lp-width));
  top: calc(274 / 853 * var(--lp-width));
  margin: 0;
  font-size: calc(16 / 853 * var(--lp-width));
  line-height: 1.45;
}

.method-button {
  position: absolute;
  left: calc(28 / 853 * var(--lp-width));
  right: calc(28 / 853 * var(--lp-width));
  bottom: calc(35 / 853 * var(--lp-width));
  min-height: calc(48 / 853 * var(--lp-width));
}

@media (max-width: 53.3125rem) {
  .method-option {
    min-height: calc(420 / 853 * var(--lp-width));
  }

  .method-option h2 {
    left: calc(22 / 853 * var(--lp-width));
    right: calc(22 / 853 * var(--lp-width));
    top: calc(215 / 853 * var(--lp-width));
    padding-bottom: calc(8 / 853 * var(--lp-width));
    font-size: calc(32 / 853 * var(--lp-width));
  }

  .method-web h2 {
    top: calc(220 / 853 * var(--lp-width));
    font-size: calc(34 / 853 * var(--lp-width));
  }

  .method-option p {
    left: calc(20 / 853 * var(--lp-width));
    right: calc(20 / 853 * var(--lp-width));
    top: calc(274 / 853 * var(--lp-width));
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .method-button {
    left: calc(28 / 853 * var(--lp-width));
    right: calc(28 / 853 * var(--lp-width));
    bottom: calc(35 / 853 * var(--lp-width));
    min-height: calc(48 / 853 * var(--lp-width));
  }
}

/* Final block-2 correction: keep the lower character/balloon/flag below the comparison table. */
.methods-block {
  height: calc(1868 / 853 * var(--lp-width));
  background:
    linear-gradient(180deg, rgba(223, 145, 67, 0.3), rgba(245, 226, 190, 0.42) 43%, rgba(58, 30, 15, 0.72) 100%),
    url("./assets/provided/methods-bg.webp") center bottom / cover no-repeat,
    linear-gradient(180deg, #e0a85f 0%, #f2d5a5 54%, #3b1f11 100%);
}

.methods-bottom {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 4;
  width: 100%;
  height: calc(255 / 853 * var(--lp-width));
  margin-top: calc(20 / 853 * var(--lp-width));
}

.methods-character,
.methods-balloon,
.methods-flag {
  position: absolute;
}

.methods-character {
  left: calc(16 / 853 * var(--lp-width));
  bottom: 0;
  width: calc(168 / 853 * var(--lp-width));
}

.methods-balloon {
  left: calc(176 / 853 * var(--lp-width));
  right: auto;
  bottom: calc(62 / 853 * var(--lp-width));
  width: calc(408 / 853 * var(--lp-width));
}

.methods-flag {
  right: calc(14 / 853 * var(--lp-width));
  bottom: calc(23 / 853 * var(--lp-width));
  width: calc(278 / 853 * var(--lp-width));
}

@media (max-width: 53.3125rem) {
  .methods-block {
    height: calc(1868 / 853 * var(--lp-width));
  }

  .methods-bottom {
    height: calc(255 / 853 * var(--lp-width));
    margin-top: calc(20 / 853 * var(--lp-width));
  }

  .methods-character {
    left: calc(16 / 853 * var(--lp-width));
    bottom: 0;
    width: calc(168 / 853 * var(--lp-width));
  }

  .methods-balloon {
    left: calc(176 / 853 * var(--lp-width));
    bottom: calc(62 / 853 * var(--lp-width));
    width: calc(408 / 853 * var(--lp-width));
  }

  .methods-flag {
    right: calc(14 / 853 * var(--lp-width));
    bottom: calc(23 / 853 * var(--lp-width));
    width: calc(278 / 853 * var(--lp-width));
  }
}

/* Block-2 reference alignment pass. */
.methods-block {
  height: calc(1900 / 853 * var(--lp-width));
}

.method-cards {
  margin-top: calc(-18 / 853 * var(--lp-width));
}

.method-option {
  min-height: calc(444 / 853 * var(--lp-width));
}

.method-option h2 {
  top: calc(236 / 853 * var(--lp-width));
}

.method-web h2 {
  top: calc(240 / 853 * var(--lp-width));
}

.method-option p {
  top: calc(296 / 853 * var(--lp-width));
}

.method-button {
  bottom: calc(34 / 853 * var(--lp-width));
}

.compare-area {
  margin-top: calc(2 / 853 * var(--lp-width));
}

.compare-heading {
  width: calc(610 / 853 * var(--lp-width));
  margin-bottom: calc(-20 / 853 * var(--lp-width));
}

.compare-grid {
  grid-template-rows: calc(54 / 853 * var(--lp-width)) repeat(5, calc(82 / 853 * var(--lp-width)));
}

.compare-head {
  font-size: calc(24 / 853 * var(--lp-width));
}

.compare-item {
  padding-left: calc(16 / 853 * var(--lp-width));
  font-size: calc(18 / 853 * var(--lp-width));
}

.compare-item img {
  width: calc(44 / 853 * var(--lp-width));
  height: calc(44 / 853 * var(--lp-width));
}

.compare-data {
  font-size: calc(18 / 853 * var(--lp-width));
}

.compare-data strong {
  font-size: calc(37 / 853 * var(--lp-width));
}

.compare-data span {
  font-size: calc(13 / 853 * var(--lp-width));
}

.compare-data.small {
  font-size: calc(13 / 853 * var(--lp-width));
  line-height: 1.35;
}

.compare-note {
  position: relative;
  z-index: 5;
  margin: 0 calc(3 / 853 * var(--lp-width)) 0;
  padding: calc(12 / 853 * var(--lp-width)) calc(10 / 853 * var(--lp-width)) calc(8 / 853 * var(--lp-width));
  color: #2d2018 !important;
  background:
    linear-gradient(180deg, rgba(250, 237, 205, 0.96), rgba(241, 216, 174, 0.92));
  border-left: calc(5 / 853 * var(--lp-width)) solid rgba(35, 23, 14, 0.92);
  border-right: calc(5 / 853 * var(--lp-width)) solid rgba(35, 23, 14, 0.92);
  font-size: calc(17 / 853 * var(--lp-width));
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 calc(1 / 853 * var(--lp-width)) 0 rgba(255, 247, 218, 0.85);
}

.methods-bottom {
  height: calc(218 / 853 * var(--lp-width));
  margin-top: calc(42 / 853 * var(--lp-width));
}

.methods-character {
  left: calc(3 / 853 * var(--lp-width));
  width: calc(184 / 853 * var(--lp-width));
}

.methods-balloon {
  left: calc(206 / 853 * var(--lp-width));
  bottom: calc(48 / 853 * var(--lp-width));
  width: calc(392 / 853 * var(--lp-width));
}

.methods-flag {
  right: calc(9 / 853 * var(--lp-width));
  bottom: calc(11 / 853 * var(--lp-width));
  width: calc(282 / 853 * var(--lp-width));
}

@media (max-width: 53.3125rem) {
  .methods-block {
    height: calc(1900 / 853 * var(--lp-width));
  }

  .method-cards {
    margin-top: calc(-18 / 853 * var(--lp-width));
  }

  .method-option {
    min-height: calc(444 / 853 * var(--lp-width));
  }

  .method-option h2 {
    top: calc(236 / 853 * var(--lp-width));
  }

  .method-web h2 {
    top: calc(240 / 853 * var(--lp-width));
  }

  .method-option p {
    top: calc(296 / 853 * var(--lp-width));
  }

  .method-button {
    bottom: calc(34 / 853 * var(--lp-width));
  }

  .compare-area {
    margin-top: calc(2 / 853 * var(--lp-width));
  }

  .compare-heading {
    width: calc(610 / 853 * var(--lp-width));
    margin-bottom: calc(-20 / 853 * var(--lp-width));
  }

  .compare-grid {
    grid-template-rows: calc(54 / 853 * var(--lp-width)) repeat(5, calc(82 / 853 * var(--lp-width)));
  }

  .compare-head {
    font-size: calc(24 / 853 * var(--lp-width));
  }

  .compare-item {
    padding-left: calc(16 / 853 * var(--lp-width));
    font-size: calc(18 / 853 * var(--lp-width));
  }

  .compare-item img {
    width: calc(44 / 853 * var(--lp-width));
    height: calc(44 / 853 * var(--lp-width));
  }

  .compare-data {
    font-size: calc(18 / 853 * var(--lp-width));
  }

  .compare-data strong {
    font-size: calc(37 / 853 * var(--lp-width));
  }

  .compare-data span {
    font-size: calc(13 / 853 * var(--lp-width));
  }

  .compare-data.small {
    font-size: calc(13 / 853 * var(--lp-width));
  }

  .compare-note {
    margin: 0 calc(3 / 853 * var(--lp-width)) 0;
    padding: calc(12 / 853 * var(--lp-width)) calc(10 / 853 * var(--lp-width)) calc(8 / 853 * var(--lp-width));
    border-left-width: calc(5 / 853 * var(--lp-width));
    border-right-width: calc(5 / 853 * var(--lp-width));
    font-size: calc(17 / 853 * var(--lp-width));
  }

  .methods-bottom {
    height: calc(218 / 853 * var(--lp-width));
    margin-top: calc(42 / 853 * var(--lp-width));
  }

  .methods-character {
    left: calc(3 / 853 * var(--lp-width));
    width: calc(184 / 853 * var(--lp-width));
  }

  .methods-balloon {
    left: calc(206 / 853 * var(--lp-width));
    bottom: calc(48 / 853 * var(--lp-width));
    width: calc(392 / 853 * var(--lp-width));
  }

  .methods-flag {
    right: calc(9 / 853 * var(--lp-width));
    bottom: calc(11 / 853 * var(--lp-width));
    width: calc(282 / 853 * var(--lp-width));
  }
}

/* Block-2 strict overlay pass against reference/1-2.jpg scaled to calc(853 / 853 * var(--lp-width)) width. */
.methods-block {
  height: calc(1516 / 853 * var(--lp-width));
  padding-top: calc(35 / 853 * var(--lp-width));
  overflow: hidden;
}

.methods-title {
  width: calc(670 / 853 * var(--lp-width));
}

.methods-rope {
  top: calc(160 / 853 * var(--lp-width));
  width: calc(640 / 853 * var(--lp-width));
}

.method-cards {
  margin-top: calc(16 / 853 * var(--lp-width));
  padding: 0 calc(14 / 853 * var(--lp-width));
  gap: calc(7 / 853 * var(--lp-width));
}

.method-option {
  min-height: calc(470 / 853 * var(--lp-width));
}

.method-option h2 {
  top: calc(242 / 853 * var(--lp-width));
  font-size: calc(32 / 853 * var(--lp-width));
}

.method-web h2 {
  top: calc(246 / 853 * var(--lp-width));
  font-size: calc(34 / 853 * var(--lp-width));
}

.method-option p {
  top: calc(306 / 853 * var(--lp-width));
  font-size: calc(16 / 853 * var(--lp-width));
}

.method-button {
  bottom: calc(34 / 853 * var(--lp-width));
}

.compare-area {
  margin-top: calc(-5 / 853 * var(--lp-width));
  padding: 0 calc(40 / 853 * var(--lp-width));
}

.compare-heading {
  width: calc(700 / 853 * var(--lp-width));
  height: calc(116 / 853 * var(--lp-width));
  margin-bottom: calc(-24 / 853 * var(--lp-width));
  object-fit: fill;
}

.compare-panel {
  border-width: calc(2 / 853 * var(--lp-width));
  border-color: rgba(52, 32, 18, 0.82);
  box-shadow: 0 calc(4 / 853 * var(--lp-width)) calc(5 / 853 * var(--lp-width)) rgba(44, 19, 8, 0.28);
}

.compare-grid {
  grid-template-rows: calc(54 / 853 * var(--lp-width)) repeat(5, calc(82 / 853 * var(--lp-width)));
}

.compare-note {
  margin: 0 calc(4 / 853 * var(--lp-width)) 0;
  padding: calc(8 / 853 * var(--lp-width)) calc(10 / 853 * var(--lp-width)) calc(7 / 853 * var(--lp-width));
  background: linear-gradient(180deg, rgba(248, 235, 203, 0.94), rgba(239, 215, 174, 0.9));
  border-left-width: calc(4 / 853 * var(--lp-width));
  border-right-width: calc(4 / 853 * var(--lp-width));
  font-size: calc(16 / 853 * var(--lp-width));
}

.methods-bottom {
  height: calc(218 / 853 * var(--lp-width));
  margin-top: calc(8 / 853 * var(--lp-width));
}

.methods-character {
  left: 0;
  bottom: 0;
  width: calc(196 / 853 * var(--lp-width));
}

.methods-balloon {
  left: calc(215 / 853 * var(--lp-width));
  bottom: calc(62 / 853 * var(--lp-width));
  width: calc(378 / 853 * var(--lp-width));
}

.methods-flag {
  right: calc(1 / 853 * var(--lp-width));
  bottom: calc(18 / 853 * var(--lp-width));
  width: calc(292 / 853 * var(--lp-width));
}

@media (max-width: 53.3125rem) {
  .methods-block {
    height: calc(1516 / 853 * var(--lp-width));
    padding-top: calc(35 / 853 * var(--lp-width));
  }

  .methods-title {
    width: calc(670 / 853 * var(--lp-width));
  }

  .methods-rope {
    top: calc(160 / 853 * var(--lp-width));
    width: calc(640 / 853 * var(--lp-width));
  }

  .method-cards {
    margin-top: calc(16 / 853 * var(--lp-width));
    padding-inline: calc(14 / 853 * var(--lp-width));
    gap: calc(7 / 853 * var(--lp-width));
  }

  .method-option {
    min-height: calc(470 / 853 * var(--lp-width));
  }

  .method-option h2 {
    top: calc(242 / 853 * var(--lp-width));
    font-size: calc(32 / 853 * var(--lp-width));
  }

  .method-web h2 {
    top: calc(246 / 853 * var(--lp-width));
    font-size: calc(34 / 853 * var(--lp-width));
  }

  .method-option p {
    top: calc(306 / 853 * var(--lp-width));
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .method-button {
    bottom: calc(34 / 853 * var(--lp-width));
  }

  .compare-area {
    margin-top: calc(-5 / 853 * var(--lp-width));
    padding-inline: calc(40 / 853 * var(--lp-width));
  }

  .compare-heading {
    width: calc(700 / 853 * var(--lp-width));
    height: calc(116 / 853 * var(--lp-width));
    margin-bottom: calc(-24 / 853 * var(--lp-width));
  }

  .compare-panel {
    border-width: calc(2 / 853 * var(--lp-width));
  }

  .compare-grid {
    grid-template-rows: calc(54 / 853 * var(--lp-width)) repeat(5, calc(82 / 853 * var(--lp-width)));
  }

  .compare-note {
    margin: 0 calc(4 / 853 * var(--lp-width)) 0;
    padding: calc(8 / 853 * var(--lp-width)) calc(10 / 853 * var(--lp-width)) calc(7 / 853 * var(--lp-width));
    border-left-width: calc(4 / 853 * var(--lp-width));
    border-right-width: calc(4 / 853 * var(--lp-width));
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .methods-bottom {
    height: calc(218 / 853 * var(--lp-width));
    margin-top: calc(8 / 853 * var(--lp-width));
  }

  .methods-character {
    left: 0;
    bottom: 0;
    width: calc(196 / 853 * var(--lp-width));
  }

  .methods-balloon {
    left: calc(215 / 853 * var(--lp-width));
    bottom: calc(62 / 853 * var(--lp-width));
    width: calc(378 / 853 * var(--lp-width));
  }

  .methods-flag {
    right: calc(1 / 853 * var(--lp-width));
    bottom: calc(18 / 853 * var(--lp-width));
    width: calc(292 / 853 * var(--lp-width));
  }
}

/* FINAL current block-2 adjustment: larger washi base and corrected vertical stacking. */
.method-cards {
  margin-top: calc(-13 / 853 * var(--lp-width));
}

.method-option {
  min-height: calc(427 / 853 * var(--lp-width));
}

.method-option h2 {
  top: calc(228 / 853 * var(--lp-width));
}

.method-web h2 {
  top: calc(232 / 853 * var(--lp-width));
}

.method-option p {
  top: calc(287 / 853 * var(--lp-width));
}

.method-button {
  bottom: calc(28 / 853 * var(--lp-width));
}

.compare-area {
  height: calc(650 / 853 * var(--lp-width));
  margin-top: 0;
  padding: calc(12 / 853 * var(--lp-width)) calc(34 / 853 * var(--lp-width)) 0;
  background: none;
}

.compare-heading {
  width: calc(735 / 853 * var(--lp-width));
  height: calc(86 / 853 * var(--lp-width));
  margin: 0 auto calc(-4 / 853 * var(--lp-width));
  object-fit: fill;
}

.compare-panel {
  border-width: calc(2 / 853 * var(--lp-width));
}

.compare-grid {
  grid-template-rows: calc(54 / 853 * var(--lp-width)) repeat(5, calc(92 / 853 * var(--lp-width)));
}

.compare-data strong {
  font-size: calc(40 / 853 * var(--lp-width));
}

.compare-data span {
  font-size: calc(16 / 853 * var(--lp-width));
}

.compare-note {
  padding-top: calc(8 / 853 * var(--lp-width));
  font-size: calc(16 / 853 * var(--lp-width));
}

.methods-bottom {
  height: calc(236 / 853 * var(--lp-width));
  margin-top: calc(-4 / 853 * var(--lp-width));
}

.methods-character {
  left: 0;
  bottom: 0;
  width: calc(198 / 853 * var(--lp-width));
}

.methods-balloon {
  left: calc(214 / 853 * var(--lp-width));
  bottom: calc(74 / 853 * var(--lp-width));
  width: calc(376 / 853 * var(--lp-width));
}

.methods-flag {
  right: 0;
  bottom: calc(29 / 853 * var(--lp-width));
  width: calc(292 / 853 * var(--lp-width));
}

@media (max-width: 53.3125rem) {
  .method-cards {
    margin-top: calc(-13 / 853 * var(--lp-width));
  }

  .method-option {
    min-height: calc(427 / 853 * var(--lp-width));
  }

  .method-option h2 {
    top: calc(228 / 853 * var(--lp-width));
  }

  .method-web h2 {
    top: calc(232 / 853 * var(--lp-width));
  }

  .method-option p {
    top: calc(287 / 853 * var(--lp-width));
  }

  .method-button {
    bottom: calc(28 / 853 * var(--lp-width));
  }

  .compare-area {
    height: calc(650 / 853 * var(--lp-width));
    margin-top: 0;
    padding: calc(12 / 853 * var(--lp-width)) calc(34 / 853 * var(--lp-width)) 0;
    background-size: calc(835 / 853 * var(--lp-width)) calc(650 / 853 * var(--lp-width));
  }

  .compare-heading {
    width: calc(735 / 853 * var(--lp-width));
    height: calc(86 / 853 * var(--lp-width));
    margin-bottom: calc(-4 / 853 * var(--lp-width));
  }

  .compare-grid {
    grid-template-rows: calc(54 / 853 * var(--lp-width)) repeat(5, calc(92 / 853 * var(--lp-width)));
  }

  .compare-data strong {
    font-size: calc(40 / 853 * var(--lp-width));
  }

  .compare-data span {
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .compare-note {
    padding-top: calc(8 / 853 * var(--lp-width));
    font-size: calc(16 / 853 * var(--lp-width));
  }

  .methods-bottom {
    height: calc(236 / 853 * var(--lp-width));
    margin-top: calc(-4 / 853 * var(--lp-width));
  }

  .methods-character {
    width: calc(198 / 853 * var(--lp-width));
  }

  .methods-balloon {
    left: calc(214 / 853 * var(--lp-width));
    bottom: calc(74 / 853 * var(--lp-width));
    width: calc(376 / 853 * var(--lp-width));
  }

  .methods-flag {
    right: 0;
    bottom: calc(29 / 853 * var(--lp-width));
    width: calc(292 / 853 * var(--lp-width));
  }
}

/* Emergency block-2 coordinate reset: one 853-wide reference grid, no flow drift. */
.methods-block {
  position: relative;
  height: calc(1516 / 853 * var(--lp-width));
  padding-top: 0;
  overflow: hidden;
}

.methods-title {
  position: absolute;
  z-index: 4;
  top: calc(18 / 853 * var(--lp-width));
  left: calc(92 / 853 * var(--lp-width));
  width: calc(670 / 853 * var(--lp-width));
}

.methods-rope {
  position: absolute;
  z-index: 7;
  top: calc(150 / 853 * var(--lp-width));
  left: calc(110 / 853 * var(--lp-width));
  width: calc(635 / 853 * var(--lp-width));
  transform: none;
}

.method-cards {
  position: absolute;
  z-index: 5;
  top: calc(205 / 853 * var(--lp-width));
  left: calc(12 / 853 * var(--lp-width));
  right: calc(12 / 853 * var(--lp-width));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(7 / 853 * var(--lp-width));
  margin: 0;
  padding: 0;
}

.method-option {
  min-height: calc(466 / 853 * var(--lp-width));
  box-shadow: 0 calc(7 / 853 * var(--lp-width)) calc(9 / 853 * var(--lp-width)) rgba(44, 20, 8, 0.42);
}

.method-ribbon {
  position: absolute;
  z-index: 8;
  top: calc(39 / 853 * var(--lp-width));
  left: calc(24 / 853 * var(--lp-width));
  transform: rotate(-11deg);
  color: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(22 / 853 * var(--lp-width));
  font-weight: 900;
  line-height: 1;
  text-shadow:
    calc(1 / 853 * var(--lp-width)) calc(1 / 853 * var(--lp-width)) 0 rgba(87, 8, 5, 0.9),
    0 calc(2 / 853 * var(--lp-width)) calc(3 / 853 * var(--lp-width)) rgba(20, 0, 0, 0.8);
  pointer-events: none;
}

.method-option h2 {
  top: calc(252 / 853 * var(--lp-width));
  font-size: calc(31 / 853 * var(--lp-width));
}

.method-web h2 {
  top: calc(256 / 853 * var(--lp-width));
  font-size: calc(34 / 853 * var(--lp-width));
}

.method-option p {
  top: calc(314 / 853 * var(--lp-width));
  font-size: calc(16 / 853 * var(--lp-width));
}

.method-button {
  bottom: calc(35 / 853 * var(--lp-width));
  min-height: calc(48 / 853 * var(--lp-width));
}

.compare-area {
  position: absolute;
  z-index: 4;
  top: calc(668 / 853 * var(--lp-width));
  left: 0;
  width: 100%;
  height: calc(900 / 853 * var(--lp-width));
  margin: 0;
  padding: calc(18 / 853 * var(--lp-width)) calc(38 / 853 * var(--lp-width)) 0;
  background: none;
}

.compare-area::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-40 / 853 * var(--lp-width));
  left: 50%;
  width: calc(750 / 853 * var(--lp-width));
  height: calc(832 / 853 * var(--lp-width));
  background: url("./assets/clean/washi-paper.webp") center center / 100% 100% no-repeat;
  transform: translateX(-50%) rotate(90deg);
  transform-origin: center center;
}

.compare-heading {
  display: block;
  width: calc(695 / 853 * var(--lp-width));
  height: auto;
  margin: calc(10 / 853 * var(--lp-width)) auto calc(-14 / 853 * var(--lp-width));
  object-fit: contain;
  filter: drop-shadow(0 calc(2 / 853 * var(--lp-width)) calc(2 / 853 * var(--lp-width)) rgba(35, 16, 7, 0.35));
}

.compare-panel {
  display: block;
  border-width: calc(1.5 / 853 * var(--lp-width));
  border-color: rgba(55, 36, 22, 0.7);
  border-radius: calc(7 / 853 * var(--lp-width));
  box-shadow: none;
}

.compare-grid {
  grid-template-rows: calc(48 / 853 * var(--lp-width)) repeat(5, calc(86 / 853 * var(--lp-width)));
}

.compare-head {
  font-size: calc(23 / 853 * var(--lp-width));
}

.compare-item {
  gap: calc(8 / 853 * var(--lp-width));
  padding-left: calc(15 / 853 * var(--lp-width));
  font-size: calc(17 / 853 * var(--lp-width));
}

.compare-item img {
  width: calc(43 / 853 * var(--lp-width));
  height: calc(43 / 853 * var(--lp-width));
}

.compare-data {
  font-size: calc(17 / 853 * var(--lp-width));
}

.compare-data strong {
  font-size: calc(38 / 853 * var(--lp-width));
}

.compare-data span,
.compare-data.small {
  font-size: calc(13 / 853 * var(--lp-width));
}

.compare-note {
  display: block;
  margin: 0;
  padding: calc(8 / 853 * var(--lp-width)) 0 0;
  background: transparent;
  border: 0;
  color: #2b1e16 !important;
  font-size: calc(13 / 853 * var(--lp-width));
  font-weight: 800;
  text-align: center;
}

.methods-bottom {
  position: absolute;
  z-index: 8;
  top: calc(1256 / 853 * var(--lp-width));
  left: 0;
  width: 100%;
  height: calc(284 / 853 * var(--lp-width));
  margin: 0;
}

.methods-character {
  left: 0;
  bottom: 0;
  width: calc(210 / 853 * var(--lp-width));
}

.methods-balloon {
  left: calc(216 / 853 * var(--lp-width));
  bottom: calc(68 / 853 * var(--lp-width));
  width: calc(382 / 853 * var(--lp-width));
}

.methods-flag {
  right: 0;
  bottom: calc(30 / 853 * var(--lp-width));
  width: calc(300 / 853 * var(--lp-width));
}

/* Block-2 final guard: keep text-bearing image assets undistorted. */
.methods-block img,
.compare-heading,
.methods-title,
.methods-rope {
  object-fit: contain !important;
}

.compare-table-art {
  display: none !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.compare-heading {
  width: calc(705 / 853 * var(--lp-width));
  height: auto !important;
  margin-top: calc(7 / 853 * var(--lp-width));
  margin-bottom: calc(-8 / 853 * var(--lp-width));
}

.compare-area {
  top: calc(671 / 853 * var(--lp-width));
  height: calc(606 / 853 * var(--lp-width));
  padding-top: calc(12 / 853 * var(--lp-width));
  background-size: auto;
}

.compare-panel {
  overflow: hidden;
}

.compare-grid {
  grid-template-rows: calc(48 / 853 * var(--lp-width)) repeat(5, calc(88 / 853 * var(--lp-width)));
}

.compare-note {
  padding-top: calc(10 / 853 * var(--lp-width));
}

.methods-bottom {
  top: calc(1262 / 853 * var(--lp-width));
  height: calc(276 / 853 * var(--lp-width));
}

.methods-character {
  width: calc(214 / 853 * var(--lp-width));
}

.methods-balloon {
  left: calc(170 / 853 * var(--lp-width));
  bottom: calc(72 / 853 * var(--lp-width));
  width: calc(386 / 853 * var(--lp-width));
}

.methods-flag {
  right: calc(-2 / 853 * var(--lp-width));
  bottom: calc(10 / 853 * var(--lp-width));
  width: calc(260 / 853 * var(--lp-width));
}

/* Block 3: recommendations, payment methods, and usage flow. */
.selection-block {
  position: relative;
  width: var(--lp-width);
  min-height: calc(1900 / 853 * var(--lp-width));
  margin: 0 auto;
  overflow: hidden;
  color: #241408;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 245, 211, 0.92) 42%, rgba(255, 244, 205, 0.98) 100%),
    url("./assets/clean/asset-38.webp") center top / auto calc(620 / 853 * var(--lp-width)) no-repeat,
    url("./assets/clean/washi-paper.webp") center calc(700 / 853 * var(--lp-width)) / calc(850 / 853 * var(--lp-width)) auto repeat-y,
    #f5ddb2;
}

.selection-title {
  position: relative;
  z-index: 3;
  display: block;
  width: calc(818 / 853 * var(--lp-width));
  height: auto;
  margin: calc(18 / 853 * var(--lp-width)) auto 0;
  object-fit: contain;
}

.selection-lead {
  position: relative;
  z-index: 3;
  margin: calc(10 / 853 * var(--lp-width)) auto calc(14 / 853 * var(--lp-width));
  color: #24201a;
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  font-size: calc(23 / 853 * var(--lp-width));
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 calc(2 / 853 * var(--lp-width)) 0 rgba(255, 255, 255, 0.65);
}

.choice-cards {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(9 / 853 * var(--lp-width));
  width: calc(830 / 853 * var(--lp-width));
  margin: 0 auto;
}

.choice-card {
  position: relative;
  min-height: calc(470 / 853 * var(--lp-width));
  overflow: hidden;
  border: calc(4 / 853 * var(--lp-width)) solid currentColor;
  border-radius: calc(5 / 853 * var(--lp-width));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 225, 0.96)),
    url("./assets/clean/washi-paper.webp") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 calc(4 / 853 * var(--lp-width)) rgba(255, 255, 255, 0.85),
    0 calc(5 / 853 * var(--lp-width)) calc(8 / 853 * var(--lp-width)) rgba(51, 23, 7, 0.3);
  text-align: center;
}

.choice-speed {
  color: #d02019;
}

.choice-beginner {
  color: #0a579a;
}

.choice-bank {
  color: #3f7a21;
}

.choice-icon {
  display: block;
  width: calc(90 / 853 * var(--lp-width));
  height: calc(90 / 853 * var(--lp-width));
  margin: calc(26 / 853 * var(--lp-width)) auto calc(14 / 853 * var(--lp-width));
  object-fit: contain;
  filter: drop-shadow(0 calc(2 / 853 * var(--lp-width)) calc(2 / 853 * var(--lp-width)) rgba(30, 12, 4, 0.28));
}

.choice-card h2,
.choice-card p {
  position: relative;
  z-index: 2;
  margin: 0;
}

.choice-kicker {
  color: currentColor;
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  font-size: calc(23 / 853 * var(--lp-width));
  font-weight: 900;
  line-height: 1.15;
}

.choice-card h2 {
  margin-top: calc(9 / 853 * var(--lp-width));
  color: #111;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(34 / 853 * var(--lp-width));
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: 0 calc(2 / 853 * var(--lp-width)) 0 #fff;
}

.choice-character {
  position: absolute;
  left: 50%;
  bottom: calc(20 / 853 * var(--lp-width));
  width: calc(160 / 853 * var(--lp-width));
  height: calc(160 / 853 * var(--lp-width));
  object-fit: contain;
  transform: translateX(-50%);
}

.payment-block {
  position: relative;
  z-index: 4;
  width: calc(842 / 853 * var(--lp-width));
  margin: calc(30 / 853 * var(--lp-width)) auto 0;
  padding: calc(38 / 853 * var(--lp-width)) calc(28 / 853 * var(--lp-width)) calc(30 / 853 * var(--lp-width));
  border: calc(3 / 853 * var(--lp-width)) solid #b77a24;
  border-radius: calc(6 / 853 * var(--lp-width));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 232, 0.98)),
    url("./assets/clean/washi-paper.webp") center / cover no-repeat;
  box-shadow: inset 0 0 0 calc(3 / 853 * var(--lp-width)) rgba(255, 255, 255, 0.76);
}

.payment-title {
  position: absolute;
  z-index: 5;
  top: calc(-42 / 853 * var(--lp-width));
  left: 50%;
  width: calc(720 / 853 * var(--lp-width));
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
}

.payment-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(18 / 853 * var(--lp-width)) calc(14 / 853 * var(--lp-width));
  align-items: center;
  padding-top: calc(18 / 853 * var(--lp-width));
}

.payment-logo {
  min-height: calc(52 / 853 * var(--lp-width));
  display: grid;
  place-items: center;
  font-family: Arial, "Yu Gothic", sans-serif;
  font-size: calc(30 / 853 * var(--lp-width));
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  color: #202020;
}

.paidy {
  color: #1c1c1c;
}

.paypay {
  color: #222;
}

.kyash {
  color: #29aeea;
}

.bundle {
  color: #20294d;
  font-size: calc(24 / 853 * var(--lp-width));
}

.merpay {
  color: #202020;
}

.apple {
  color: #222;
  font-size: calc(20 / 853 * var(--lp-width));
}

.visa {
  color: #1643bb;
  font-size: calc(40 / 853 * var(--lp-width));
}

.master {
  color: #d23625;
  font-size: calc(28 / 853 * var(--lp-width));
}

.jcb {
  color: #0f63a8;
  font-size: calc(32 / 853 * var(--lp-width));
}

.amex,
.diners {
  color: #1d5f9d;
  font-size: calc(18 / 853 * var(--lp-width));
  border: none;
}

.flow-block {
  position: relative;
  z-index: 4;
  width: calc(842 / 853 * var(--lp-width));
  margin: calc(55 / 853 * var(--lp-width)) auto 0;
  padding: calc(58 / 853 * var(--lp-width)) calc(10 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width));
  border: calc(4 / 853 * var(--lp-width)) solid #0d5796;
  border-radius: calc(6 / 853 * var(--lp-width));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 248, 225, 0.97)),
    url("./assets/clean/washi-paper.webp") center / cover no-repeat;
  box-shadow: inset 0 0 0 calc(3 / 853 * var(--lp-width)) rgba(255, 255, 255, 0.75);
}

.flow-title {
  position: absolute;
  z-index: 5;
  top: calc(-42 / 853 * var(--lp-width));
  left: 50%;
  width: calc(560 / 853 * var(--lp-width));
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(8 / 853 * var(--lp-width));
}

.flow-step {
  position: relative;
  min-height: calc(245 / 853 * var(--lp-width));
  text-align: center;
}

.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(122 / 853 * var(--lp-width));
  right: calc(-14 / 853 * var(--lp-width));
  width: 0;
  height: 0;
  border-top: calc(19 / 853 * var(--lp-width)) solid transparent;
  border-bottom: calc(19 / 853 * var(--lp-width)) solid transparent;
  border-left: calc(24 / 853 * var(--lp-width)) solid #dc5b13;
  filter: drop-shadow(0 calc(1 / 853 * var(--lp-width)) calc(1 / 853 * var(--lp-width)) rgba(60, 18, 3, 0.35));
}

.flow-number {
  display: inline-grid;
  place-items: center;
  width: calc(48 / 853 * var(--lp-width));
  height: calc(48 / 853 * var(--lp-width));
  margin-right: calc(4 / 853 * var(--lp-width));
  color: #fff;
  font-family: Georgia, serif;
  font-size: calc(30 / 853 * var(--lp-width));
  font-weight: 900;
  background: #0b5796;
  border: calc(3 / 853 * var(--lp-width)) solid #e2c15e;
  transform: rotate(45deg);
}

.flow-number::first-letter {
  transform: rotate(-45deg);
}

.flow-step h3 {
  display: inline-block;
  margin: 0;
  color: #16110d;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(23 / 853 * var(--lp-width));
  font-weight: 900;
  line-height: 1.05;
  vertical-align: middle;
}

.flow-step img {
  display: block;
  width: calc(132 / 853 * var(--lp-width));
  height: calc(132 / 853 * var(--lp-width));
  margin: calc(10 / 853 * var(--lp-width)) auto calc(6 / 853 * var(--lp-width));
  object-fit: contain;
}

.flow-step p {
  margin: 0;
  color: #2a180e;
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  font-size: calc(16 / 853 * var(--lp-width));
  font-weight: 900;
  line-height: 1.2;
}

.selection-bottom-copy {
  position: relative;
  z-index: 4;
  display: block;
  width: calc(850 / 853 * var(--lp-width));
  height: auto;
  margin: calc(8 / 853 * var(--lp-width)) auto 0;
  object-fit: contain;
}

/* Block 3 overlay correction pass. */
.selection-block {
  min-height: calc(1900 / 853 * var(--lp-width));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 241, 196, 0.16) 35%, rgba(255, 244, 206, 0.92) 48%, rgba(255, 244, 206, 0.98) 100%),
    url("./assets/clean/block3-sky.webp") center top / auto calc(780 / 853 * var(--lp-width)) no-repeat,
    url("./assets/clean/washi-paper.webp") center calc(730 / 853 * var(--lp-width)) / calc(850 / 853 * var(--lp-width)) auto repeat-y,
    #f5ddb2;
}

.selection-title {
  width: calc(764 / 853 * var(--lp-width));
  margin-top: calc(6 / 853 * var(--lp-width));
}

.selection-lead {
  margin-top: calc(6 / 853 * var(--lp-width));
  margin-bottom: calc(12 / 853 * var(--lp-width));
}

.choice-cards {
  width: calc(832 / 853 * var(--lp-width));
  gap: calc(11 / 853 * var(--lp-width));
}

.choice-card {
  min-height: calc(458 / 853 * var(--lp-width));
}

.choice-icon {
  width: calc(82 / 853 * var(--lp-width));
  height: calc(82 / 853 * var(--lp-width));
  margin-top: calc(24 / 853 * var(--lp-width));
}

.choice-character {
  bottom: calc(18 / 853 * var(--lp-width));
  width: calc(150 / 853 * var(--lp-width));
  height: calc(150 / 853 * var(--lp-width));
}

.payment-block {
  margin-top: calc(24 / 853 * var(--lp-width));
  padding-top: calc(78 / 853 * var(--lp-width));
  padding-bottom: calc(22 / 853 * var(--lp-width));
}

.payment-title {
  top: calc(-34 / 853 * var(--lp-width));
  width: calc(730 / 853 * var(--lp-width));
}

.payment-panel {
  padding-top: 0;
  gap: calc(13 / 853 * var(--lp-width)) calc(14 / 853 * var(--lp-width));
}

.payment-logo {
  min-height: calc(42 / 853 * var(--lp-width));
}

/* Block 3 true final override: keep after app logo pass. */
.selection-block {
  height: calc(1900 / 853 * var(--lp-width));
  min-height: calc(1900 / 853 * var(--lp-width));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 249, 225, 0.02) 39%, rgba(255, 244, 207, 0.1) 44%, rgba(255, 244, 207, 0.98) 51%, rgba(255, 244, 207, 0.98) 100%),
    url("./assets/clean/backgroundX.webp") center top / 100% 100% no-repeat;
}

.choice-cards {
  margin-top: calc(-52 / 853 * var(--lp-width));
}

.payment-block {
  min-height: calc(338 / 853 * var(--lp-width));
  margin-top: calc(14 / 853 * var(--lp-width));
  padding-top: calc(62 / 853 * var(--lp-width));
  padding-bottom: calc(26 / 853 * var(--lp-width));
}

.payment-panel {
  gap: calc(24 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width));
}

.flow-block {
  margin-top: calc(-40 / 853 * var(--lp-width));
}

.selection-bottom-copy {
  margin-top: 0;
}

.payment-block {
  padding-top: calc(62 / 853 * var(--lp-width));
  padding-bottom: calc(26 / 853 * var(--lp-width));
}

.payment-panel {
  gap: calc(24 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width));
}

/* Block 3 last override: backgroundX/Y full width and compact stacking. */
.selection-block {
  height: calc(1900 / 853 * var(--lp-width));
  min-height: calc(1900 / 853 * var(--lp-width));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 249, 225, 0.02) 39%, rgba(255, 244, 207, 0.1) 44%, rgba(255, 244, 207, 0.98) 51%, rgba(255, 244, 207, 0.98) 100%),
    url("./assets/clean/backgroundX.webp") center top / 100% 100% no-repeat;
}

.choice-cards {
  margin-top: calc(-52 / 853 * var(--lp-width));
}

.payment-block {
  min-height: calc(338 / 853 * var(--lp-width));
  margin-top: calc(14 / 853 * var(--lp-width));
  padding-top: calc(62 / 853 * var(--lp-width));
  padding-bottom: calc(26 / 853 * var(--lp-width));
}

.payment-panel {
  gap: calc(24 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width));
}

.flow-block {
  margin-top: calc(-40 / 853 * var(--lp-width));
}

.selection-bottom-copy {
  margin-top: 0;
}

/* Block 3 width/background compression pass. */
.selection-block {
  height: calc(1900 / 853 * var(--lp-width));
  min-height: calc(1900 / 853 * var(--lp-width));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 249, 225, 0.02) 39%, rgba(255, 244, 207, 0.1) 44%, rgba(255, 244, 207, 0.98) 51%, rgba(255, 244, 207, 0.98) 100%),
    url("./assets/clean/backgroundX.webp") center top / 100% 100% no-repeat;
}

.choice-cards {
  margin-top: calc(-52 / 853 * var(--lp-width));
}

.payment-block {
  min-height: calc(338 / 853 * var(--lp-width));
  margin-top: calc(14 / 853 * var(--lp-width));
  padding-top: calc(62 / 853 * var(--lp-width));
  padding-bottom: calc(26 / 853 * var(--lp-width));
}

.payment-panel {
  gap: calc(24 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width));
}

.flow-block {
  margin-top: calc(-40 / 853 * var(--lp-width));
}

.selection-bottom-copy {
  margin-top: 0;
}

.flow-block {
  margin-top: calc(-40 / 853 * var(--lp-width));
  padding-top: calc(50 / 853 * var(--lp-width));
}

.flow-title {
  top: calc(-39 / 853 * var(--lp-width));
  width: calc(548 / 853 * var(--lp-width));
}

.flow-step {
  min-height: calc(224 / 853 * var(--lp-width));
}

.flow-step img {
  width: calc(124 / 853 * var(--lp-width));
  height: calc(124 / 853 * var(--lp-width));
}

.selection-bottom-copy {
  margin-top: calc(5 / 853 * var(--lp-width));
}

/* Block 3 supplied-image pass. */
.choice-cards {
  align-items: stretch;
  gap: calc(6 / 853 * var(--lp-width));
  width: calc(842 / 853 * var(--lp-width));
}

.choice-card-image {
  display: block;
  width: 100%;
  height: calc(472 / 853 * var(--lp-width));
  object-fit: contain;
  filter: drop-shadow(0 calc(4 / 853 * var(--lp-width)) calc(5 / 853 * var(--lp-width)) rgba(45, 20, 6, 0.36));
}

.payment-block {
  margin-top: calc(20 / 853 * var(--lp-width));
  padding-top: calc(82 / 853 * var(--lp-width));
}

.flow-block {
  margin-top: calc(-40 / 853 * var(--lp-width));
  padding: calc(40 / 853 * var(--lp-width)) calc(2 / 853 * var(--lp-width)) calc(10 / 853 * var(--lp-width));
  border: 0;
  background: transparent;
  box-shadow: none;
}

.flow-title {
  top: calc(-31 / 853 * var(--lp-width));
}

.flow-image {
  display: block;
  width: calc(845 / 853 * var(--lp-width));
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 calc(3 / 853 * var(--lp-width)) calc(4 / 853 * var(--lp-width)) rgba(45, 20, 6, 0.25));
}

/* Block 3 supplied-image alignment pass. */
.selection-block {
  background:
    url("./assets/clean/backgroundX.webp") center top / 100% 100% no-repeat;
}

.selection-title {
  width: calc(790 / 853 * var(--lp-width));
  margin-top: calc(6 / 853 * var(--lp-width));
}

.selection-lead {
  margin-top: calc(2 / 853 * var(--lp-width));
  margin-bottom: 0;
}

.choice-cards {
  margin: calc(-44 / 853 * var(--lp-width)) auto 0;
}

.choice-card-image {
  height: calc(515 / 853 * var(--lp-width));
}

.payment-block {
  margin-top: calc(58 / 853 * var(--lp-width));
}

/* Block 3 supplied app logos and final background pass. */
.selection-block {
  background:
    url("./assets/clean/backgroundX.webp") center top / 100% 100% no-repeat;
}

.payment-block {
  width: calc(842 / 853 * var(--lp-width));
  min-height: calc(360 / 853 * var(--lp-width));
  margin-top: calc(42 / 853 * var(--lp-width));
  padding: calc(78 / 853 * var(--lp-width)) calc(58 / 853 * var(--lp-width)) calc(26 / 853 * var(--lp-width));
  border: 0;
  border-radius: 0;
  background: url("./assets/clean/app8.webp") center center / 100% 100% no-repeat;
  box-shadow: none;
}

.payment-title {
  top: calc(-45 / 853 * var(--lp-width));
  width: calc(735 / 853 * var(--lp-width));
}

.payment-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: calc(24 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width));
  padding-top: 0;
}

.payment-logo-img {
  display: block;
  width: 100%;
  height: calc(48 / 853 * var(--lp-width));
  object-fit: contain;
}

.payment-logo-img.paidy,
.payment-logo-img.paypay,
.payment-logo-img.kyash,
.payment-logo-img.merpay {
  height: calc(64 / 853 * var(--lp-width));
}

.payment-logo-img.apple,
.payment-logo-img.bundle {
  height: calc(54 / 853 * var(--lp-width));
}

.payment-logo-img.visa,
.payment-logo-img.master,
.payment-logo-img.jcb {
  height: calc(56 / 853 * var(--lp-width));
}

.payment-logo-img.amex,
.payment-logo-img.diners {
  height: calc(54 / 853 * var(--lp-width));
}

.payment-logo-img.diners {
  width: calc(108 / 100 * 100%);
}

.payment-logo {
  min-height: calc(42 / 853 * var(--lp-width));
}

/* Block 3 true final override: keep after app logo pass. */
.selection-block {
  height: calc(1900 / 853 * var(--lp-width));
  min-height: calc(1900 / 853 * var(--lp-width));
  background:
    url("./assets/clean/backgroundX.webp") center top / 100% 100% no-repeat;
}

.choice-cards {
  margin-top: calc(-52 / 853 * var(--lp-width));
  margin-bottom: calc(80 / 853 * var(--lp-width));
}

.payment-block {
  height: calc(520 / 853 * var(--lp-width));
  margin-top: calc(-80 / 853 * var(--lp-width));
  padding-top: calc(110 / 853 * var(--lp-width));
  padding-bottom: calc(60 / 853 * var(--lp-width));
}

.flow-block {
  .flow-block {
    margin-top: calc(-40 / 853 * var(--lp-width));

    .selection-bottom-copy {
      margin-top: 0;
    }

    .payment-block {
      padding-top: calc(110 / 853 * var(--lp-width));
      padding-bottom: calc(60 / 853 * var(--lp-width));
    }

    .payment-panel {
      gap: calc(24 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width));
    }

    .payment-title {
      top: calc(-45 / 853 * var(--lp-width));
      width: calc(735 / 853 * var(--lp-width));
    }


    .section-divider {
      width: 100%;
      height: calc(16 / 853 * var(--lp-width));
      background:
        linear-gradient(90deg,
          transparent 0%,
          rgba(180, 130, 40, 0.4) 5%,
          #c8a227 15%,
          #f0d060 30%,
          #fff8c0 50%,
          #f0d060 70%,
          #c8a227 85%,
          rgba(180, 130, 40, 0.4) 95%,
          transparent 100%);
      box-shadow: 0 0 calc(8 / 853 * var(--lp-width)) rgba(200, 160, 30, 0.6);
      position: relative;
      z-index: 20;
    }

    .flow-labels {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      text-align: center;
      gap: 0;
      width: calc(845 / 853 * var(--lp-width));
      margin: calc(6 / 853 * var(--lp-width)) auto 0;
      padding: 0 calc(20 / 853 * var(--lp-width));
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: calc(20 / 853 * var(--lp-width));
      font-weight: 900;
      color: #241408;
      line-height: 1.4;
    }
  }
}

.sakaime {
  display: block;
  width: 100%;
  position: absolute;
  top: calc(580 / 853 * var(--lp-width));
  left: 0;
  z-index: 50;
}

.flow-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  width: calc(845 / 853 * var(--lp-width));
  margin: calc(-80 / 853 * var(--lp-width)) auto 0;
  padding: 0 calc(20 / 853 * var(--lp-width));
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(16 / 853 * var(--lp-width));
  font-weight: 900;
  color: #241408;
  line-height: 1.4;
  position: relative;
  z-index: 100;
}

.flow-label-first {
  padding-left: calc(20 / 853 * var(--lp-width));
}

.selection-bottom-copy {
  margin-top: calc(20 / 853 * var(--lp-width));
  position: relative;
  z-index: 10;
}

.method-phone {
  position: relative;
  z-index: 10;
}

.method-cards {
  z-index: 10;
}

.flow-labels {
  grid-template-columns: repeat(3, 1fr);
}



.flow-detail-btn {
  display: block;
  margin: calc(6 / 853 * var(--lp-width)) auto 0;
  padding: calc(6 / 853 * var(--lp-width)) calc(16 / 853 * var(--lp-width));
  background: linear-gradient(90deg, #3b1f11, #6b3a1f);
  color: #f0d060;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(22 / 853 * var(--lp-width));
  font-weight: 700;
  border: calc(2 / 853 * var(--lp-width)) solid #c8a227;
  border-radius: calc(6 / 853 * var(--lp-width));
  cursor: pointer;
  padding: calc(10 / 853 * var(--lp-width)) calc(24 / 853 * var(--lp-width));
}

.flow-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.flow-modal.open {
  display: flex;
}

.flow-modal-inner {
  background: #fff8e7;
  border: calc(3 / 853 * var(--lp-width)) solid #c8a227;
  border-radius: calc(8 / 853 * var(--lp-width));
  padding: calc(30 / 853 * var(--lp-width));
  width: 80%;
  max-width: 600px;
  position: relative;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: #241408;
  line-height: 1.8;
}

.flow-modal-inner h3 {
  font-size: calc(20 / 853 * var(--lp-width));
  font-weight: 900;
  color: #3b1f11;
  margin-bottom: calc(16 / 853 * var(--lp-width));
  border-bottom: calc(2 / 853 * var(--lp-width)) solid #c8a227;
  padding-bottom: calc(8 / 853 * var(--lp-width));
}

.flow-modal-close {
  position: absolute;
  top: calc(10 / 853 * var(--lp-width));
  right: calc(10 / 853 * var(--lp-width));
  background: none;
  border: none;
  font-size: calc(20 / 853 * var(--lp-width));
  cursor: pointer;
  color: #3b1f11;
}

.flow-modal-note {
  color: #c0392b;
  font-weight: 700;
  margin-bottom: calc(12 / 853 * var(--lp-width));
}

.flow-modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 / 853 * var(--lp-width));
}

.flow-modal-list li {
  padding: calc(10 / 853 * var(--lp-width));
  background: rgba(200, 162, 39, 0.1);
  border-left: calc(4 / 853 * var(--lp-width)) solid #c8a227;
  border-radius: calc(4 / 853 * var(--lp-width));
}

/* ===== Section 4 ===== */
.review-block {
  position: relative;
  width: var(--lp-width);
  margin: 0 auto;
  overflow: hidden;
  background: url("./assets/clean/background1.webp") center top / cover no-repeat;
}

/* 利用者の声 */
.review-section {
  padding: calc(30 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width));
  text-align: center;
}

.review-title {
  width: calc(700 / 853 * var(--lp-width));
  margin: 0 auto calc(10 / 853 * var(--lp-width));
  display: block;
}

.review-title-text {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(52 / 853 * var(--lp-width));
  font-weight: 900;
  color: #241408;
  margin: 0 auto calc(10 / 853 * var(--lp-width));
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.review-lead {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(20 / 853 * var(--lp-width));
  font-weight: 900;
  color: #241408;
  margin-top: calc(-10 / 853 * var(--lp-width));
  margin-bottom: calc(16 / 853 * var(--lp-width));
}

.review-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(16 / 853 * var(--lp-width));
  width: calc(780 / 853 * var(--lp-width));
  margin: 0 auto;
}

.review-card {
  position: relative;
}

.review-scroll {
  width: 100%;
  display: block;
}

.review-text {
  position: absolute;
  top: 38%;
  bottom: calc(10 / 853 * var(--lp-width));
  left: calc(40 / 853 * var(--lp-width));
  right: calc(40 / 853 * var(--lp-width));
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(13 / 853 * var(--lp-width));
  font-weight: 700;
  color: #241408;
  line-height: 1.6;
  text-align: left;
  overflow: hidden;
}

/* よくあるご質問 */
.faq-section {
  padding: calc(10 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width)) calc(40 / 853 * var(--lp-width));
  text-align: center;
  margin-top: calc(-20 / 853 * var(--lp-width));
}

.faq-title {
  width: calc(620 / 853 * var(--lp-width));
  margin: 0 auto calc(0 / 853 * var(--lp-width));
  display: block;
}

.faq-list {
  width: calc(813 / 853 * var(--lp-width));
  margin: calc(-40 / 853 * var(--lp-width)) auto 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 / 853 * var(--lp-width));
  align-self: center;
}

.faq-item {
  border: calc(2 / 853 * var(--lp-width)) solid #c8a227;
  border-radius: calc(6 / 853 * var(--lp-width));
  overflow: hidden;
  background: rgba(255, 248, 220, 0.95);
}

.faq-btn {
  width: 100%;
  padding: calc(16 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width));
  background: rgba(255, 248, 220, 0.95);
  color: #241408;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(17 / 853 * var(--lp-width));
  font-weight: 700;
  text-align: left;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: calc(10 / 853 * var(--lp-width));
}

.faq-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(32 / 853 * var(--lp-width));
  height: calc(32 / 853 * var(--lp-width));
  background: #241408;
  color: #f0d060;
  font-size: calc(18 / 853 * var(--lp-width));
  font-weight: 900;
  border-radius: 50%;
  flex-shrink: 0;
}

.faq-icon {
  margin-left: auto;
  font-size: calc(22 / 853 * var(--lp-width));
  color: #c8a227;
  transition: transform 0.3s;
}

.faq-btn[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-body {
  display: none;
  padding: calc(14 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width)) calc(14 / 853 * var(--lp-width)) calc(62 / 853 * var(--lp-width));
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(13 / 853 * var(--lp-width));
  color: #241408;
  line-height: 1.8;
  border-top: calc(1 / 853 * var(--lp-width)) solid #c8a227;
  background: rgba(255, 252, 235, 0.9);
  text-align: left;
}

.faq-body.open {
  display: block;
}

/* CTA */
.cta-section {
  padding: calc(20 / 853 * var(--lp-width)) 0 calc(80 / 853 * var(--lp-width));
  text-align: center;
  position: relative;
}

.cta-banner {
  width: 100%;
  display: block;
  margin-bottom: 0;
}

.cta-btn-wrap {
  display: block;
  width: calc(500 / 853 * var(--lp-width));
  position: absolute;
  bottom: calc(85 / 853 * var(--lp-width));
  left: calc(55 / 853 * var(--lp-width));
  z-index: 10;
}

.cta-btn {
  width: 100%;
  display: block;
  transition: opacity 0.2s;
}

.cta-btn-wrap:hover .cta-btn {
  opacity: 0.85;
}

/* ハンバーガーメニュー */
.hero-reception {
  top: calc(35 / 853 * var(--lp-width));
  right: calc(95 / 853 * var(--lp-width));
  left: auto;
  width: calc(180 / 853 * var(--lp-width));
}

.hamburger-btn {
  position: absolute;
  z-index: 9999;
  top: calc(35 / 853 * var(--lp-width));
  right: calc(20 / 853 * var(--lp-width));
  width: calc(65 / 853 * var(--lp-width));
  height: calc(65 / 853 * var(--lp-width));
  background: rgba(59, 31, 17, 0.85);
  border: calc(2 / 853 * var(--lp-width)) solid #c8a227;
  border-radius: calc(6 / 853 * var(--lp-width));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(6 / 853 * var(--lp-width));
  padding: calc(8 / 853 * var(--lp-width));
}

.hamburger-btn span {
  display: block;
  width: 100%;
  height: calc(3 / 853 * var(--lp-width));
  background: #f0d060;
  border-radius: calc(2 / 853 * var(--lp-width));
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(calc(9 / 853 * var(--lp-width))) rotate(45deg);
}

.hamburger-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(calc(-9 / 853 * var(--lp-width))) rotate(-45deg);
}

.hamburger-menu {
  display: none;
  position: absolute;
  z-index: 99999;
  top: calc(110 / 853 * var(--lp-width));
  right: calc(20 / 853 * var(--lp-width));
  width: calc(220 / 853 * var(--lp-width));
  background: rgba(30, 15, 5, 0.98);
  border: 2px solid #c8a227;
  border-radius: 8px;
}

.hamburger-menu.open {
  display: block;
}

.hamburger-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hamburger-menu li {
  border-bottom: calc(1 / 853 * var(--lp-width)) solid rgba(200, 162, 39, 0.3);
}

.hamburger-menu li:last-child {
  border-bottom: none;
}

.hamburger-menu a {
  display: block;
  padding: calc(16 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width));
  color: #f0d060;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(16 / 853 * var(--lp-width));
  font-weight: 700;
  text-decoration: none;
}

.hamburger-menu a:hover {
  background: rgba(200, 162, 39, 0.2);
}


.hero-block {
  overflow: visible;
}

/* ===== フッター ===== */
.site-footer {
  background: #1a0a02;
  border-top: calc(3 / 853 * var(--lp-width)) solid #c8a227;
  width: var(--lp-width);
  margin: 0 auto;
}

.footer-inner {
  padding: calc(30 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width)) calc(10 / 853 * var(--lp-width)) calc(70 / 853 * var(--lp-width));
  display: flex;
  align-items: flex-start;
  gap: calc(18 / 853 * var(--lp-width));
}

.footer-logo {
  flex-shrink: 0;
  padding-top: calc(10 / 853 * var(--lp-width));
}

.footer-logo img {
  width: calc(250 / 853 * var(--lp-width));
  display: block;
}

.footer-nav {
  margin-left: calc(180 / 853 * var(--lp-width));
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 calc(24 / 853 * var(--lp-width));
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: calc(14 / 853 * var(--lp-width));
  row-gap: calc(6 / 853 * var(--lp-width));
}

.footer-nav a,
.footer-modal-btn {
  color: #f0d060;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(13 / 853 * var(--lp-width));
  font-weight: 700;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

.footer-nav a:hover,
.footer-modal-btn:hover {
  text-decoration: underline;
}

.footer-copy {
  color: rgba(240, 208, 96, 0.5);
  font-size: calc(12 / 853 * var(--lp-width));
  text-align: center;
  padding: calc(10 / 853 * var(--lp-width)) 0 calc(16 / 853 * var(--lp-width));
  border-top: 1px solid rgba(200, 162, 39, 0.2);
  margin: 0;
}

/* フッターモーダル */
.footer-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.footer-modal.open {
  display: flex;
}

.footer-modal-inner {
  background: #fff8e7;
  border: 3px solid #c8a227;
  border-radius: 8px;
  padding: 30px;
  width: 90%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: #241408;
  line-height: 1.8;
}

.footer-modal-inner h3 {
  font-size: 20px;
  font-weight: 900;
  color: #3b1f11;
  border-bottom: 2px solid #c8a227;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.footer-modal-inner h3 span {
  font-size: 13px;
  color: #888;
  margin-left: 10px;
  font-weight: 400;
}

.footer-modal-inner h4 {
  font-size: 15px;
  font-weight: 900;
  color: #3b1f11;
  margin: 16px 0 6px;
}

.footer-modal-inner p,
.footer-modal-inner li {
  font-size: 13px;
  line-height: 1.8;
}

.footer-modal-inner ul {
  padding-left: 20px;
  margin: 8px 0;
}

.footer-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.footer-modal-table th,
.footer-modal-table td {
  padding: 10px 14px;
  border: 1px solid #c8a227;
  text-align: left;
}

.footer-modal-table th {
  background: rgba(200, 162, 39, 0.15);
  font-weight: 700;
  white-space: nowrap;
}

.footer-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #3b1f11;
}

/* ===== メリットスライダー ===== */
.merit-slider-wrap {
  position: relative;
  width: calc(813 / 853 * var(--lp-width));
  margin: calc(260 / 853 * var(--lp-width)) auto 0;
  display: flex;
  align-items: center;
  gap: calc(8 / 853 * var(--lp-width));
}

.merit-slider {
  flex: 1;
  overflow: hidden;
}

.merit-track {
  display: flex;
  gap: calc(10 / 853 * var(--lp-width));
  transition: transform 0.3s ease;
}

.merit-card {
  position: relative;
  min-width: calc((100% - calc(20 / 853 * var(--lp-width))) / 3);
  max-width: calc((100% - calc(20 / 853 * var(--lp-width))) / 3);
  flex-shrink: 0;
}

.merit-bg {
  width: 100%;
  height: calc(520 / 853 * var(--lp-width));
  object-fit: cover;
  object-position: top;
  display: block;
}

.merit-text {
  position: absolute;
  top: 22%;
  bottom: calc(10 / 853 * var(--lp-width));
  left: calc(20 / 853 * var(--lp-width));
  right: calc(20 / 853 * var(--lp-width));
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: calc(15 / 853 * var(--lp-width));
  font-weight: 700;
  color: #241408;
  line-height: 1.8;
  overflow: hidden;
}

.merit-red {
  color: #c0392b;
  font-weight: 900;
  font-size: calc(17 / 853 * var(--lp-width));
}

.merit-prev,
.merit-next {
  flex-shrink: 0;
  width: calc(55 / 853 * var(--lp-width));
  height: calc(55 / 853 * var(--lp-width));
  background: rgba(59, 31, 17, 0.9);
  border: calc(2 / 853 * var(--lp-width)) solid #c8a227;
  border-radius: 50%;
  color: #f0d060;
  font-size: calc(36 / 853 * var(--lp-width));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
  top: calc(-60 / 853 * var(--lp-width));
  z-index: 10;
}

.merit-dots {
  display: flex;
  justify-content: center;
  gap: calc(8 / 853 * var(--lp-width));
  margin: calc(4 / 853 * var(--lp-width)) auto;
}

.merit-dot {
  width: calc(10 / 853 * var(--lp-width));
  height: calc(10 / 853 * var(--lp-width));
  border-radius: 50%;
  background: rgba(200, 162, 39, 0.3);
  cursor: pointer;
  transition: background 0.3s;
}

.merit-dot.active {
  background: #c8a227;
}

/* ===== 2列比較表 ===== */
.compare2-area {
  position: relative;
  width: calc(813 / 853 * var(--lp-width));
  margin: calc(-150 / 853 * var(--lp-width)) auto calc(20 / 853 * var(--lp-width));
  background: url("./assets/clean/washi-paper.webp") center center / 100% 100% no-repeat;
  padding: calc(20 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width)) calc(16 / 853 * var(--lp-width));
}

.compare2-panel {
  margin-top: calc(10 / 853 * var(--lp-width));
}

.compare2-grid {
  display: grid;
  grid-template-columns: 2fr 3fr 3fr;
  border: calc(2 / 853 * var(--lp-width)) solid #8b6914;
  border-radius: calc(4 / 853 * var(--lp-width));
  overflow: hidden;
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: calc(14 / 853 * var(--lp-width));
}

.compare2-head {
  padding: calc(10 / 853 * var(--lp-width));
  text-align: center;
  font-weight: 900;
  color: #fff;
  font-size: calc(15 / 853 * var(--lp-width));
}

.compare2-head.item {
  background: #3b1f11;
}

.compare2-head.web {
  background: #c0392b;
}

.compare2-head.phone {
  background: #8b6914;
}

.compare2-item {
  padding: calc(12 / 853 * var(--lp-width)) calc(10 / 853 * var(--lp-width));
  background: rgba(240, 220, 180, 0.5);
  border-top: calc(1 / 853 * var(--lp-width)) solid rgba(139, 105, 20, 0.3);
  font-weight: 700;
  color: #241408;
  display: flex;
  align-items: center;
  font-size: calc(13 / 853 * var(--lp-width));
}

.compare2-data {
  padding: calc(12 / 853 * var(--lp-width)) calc(8 / 853 * var(--lp-width));
  border-top: calc(1 / 853 * var(--lp-width)) solid rgba(139, 105, 20, 0.3);
  border-left: calc(1 / 853 * var(--lp-width)) solid rgba(139, 105, 20, 0.3);
  text-align: center;
  color: #241408;
  font-size: calc(13 / 853 * var(--lp-width));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 / 853 * var(--lp-width));
}

.compare2-data.web {
  background: rgba(192, 57, 43, 0.06);
}

.compare2-data strong {
  font-size: calc(18 / 853 * var(--lp-width));
  color: #c0392b;
}

.compare2-data.small {
  font-size: calc(11 / 853 * var(--lp-width));
  line-height: 1.6;
}

.compare2-item img {
  width: calc(28 / 853 * var(--lp-width));
  height: calc(28 / 853 * var(--lp-width));
  margin-right: calc(6 / 853 * var(--lp-width));
  flex-shrink: 0;
}


.methods-character {
  bottom: calc(30 / 853 * var(--lp-width));
}

.methods-balloon {
  bottom: calc(92 / 853 * var(--lp-width));
}

.methods-flag {
  bottom: calc(30 / 853 * var(--lp-width));
}

.methods-flag {
  right: calc(10 / 853 * var(--lp-width));
  width: calc(290 / 853 * var(--lp-width));
}

.compare2-btn {
  display: block;
  padding: calc(10 / 853 * var(--lp-width)) calc(16 / 853 * var(--lp-width));
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: calc(14 / 853 * var(--lp-width));
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  border-radius: calc(6 / 853 * var(--lp-width));
  box-shadow: 0 calc(3 / 853 * var(--lp-width)) calc(6 / 853 * var(--lp-width)) rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s;
}

.compare2-btn:hover {
  opacity: 0.85;
}

.compare2-btn.red {
  background: linear-gradient(180deg, #e8360a, #a02010);
  color: #fff;
  border: calc(2 / 853 * var(--lp-width)) solid #f0d060;
}

.compare2-btn.gold {
  background: linear-gradient(180deg, #c8a227, #8b6914);
  color: #fff;
  border: calc(2 / 853 * var(--lp-width)) solid #f0d060;
}

.methods-side-banner {
  display: none;
}

.hamburger-apply-btn {
  display: block;
  margin: calc(8 / 853 * var(--lp-width)) calc(16 / 853 * var(--lp-width));
  padding: calc(12 / 853 * var(--lp-width)) calc(16 / 853 * var(--lp-width));
  background: linear-gradient(180deg, #e8360a, #a02010);
  color: #fff !important;
  font-weight: 900;
  text-align: center;
  border: 2px solid #f0d060;
  border-radius: 6px;
  text-decoration: none;
}

.hamburger-menu,
.flow-modal,
.footer-modal {
  z-index: 999999 !important;
}

.selection-bottom-copy {
  z-index: 1;
}

.hamburger-menu.open,
.flow-modal.open,
.footer-modal.open {
  z-index: 2147483647 !important;
  isolation: isolate;
}

body {
  position: relative;
  z-index: 0;
}

.lp {
  position: relative;
  overflow: visible;
}

.compare2-item,
.compare2-data,
.compare2-data span {
  font-weight: 700;
}

.compare2-item {
  font-size: calc(16 / 853 * var(--lp-width));
  justify-content: center;
  text-align: center;
}

.hero-block {
  overflow: hidden;
}

.methods-title {
  top: calc(10 / 853 * var(--lp-width));
}

.merit-slider-wrap {
  margin: calc(240 / 853 * var(--lp-width)) auto 0;
}


.methods-character {
  bottom: calc(50 / 853 * var(--lp-width));
}

.methods-balloon {
  bottom: calc(100 / 853 * var(--lp-width));
}

.methods-flag {
  bottom: calc(50 / 853 * var(--lp-width));
  right: calc(10 / 853 * var(--lp-width));
  width: calc(290 / 853 * var(--lp-width));
}

.methods-bottom {
  height: calc(300 / 853 * var(--lp-width));
  margin-top: calc(-40 / 853 * var(--lp-width));
}



.selection-block {
  height: auto;
  min-height: 0;
  padding-bottom: calc(60 / 853 * var(--lp-width));
  background: url("./assets/clean/backgroundX.webp") center top / 100% 100% no-repeat;
}

.choice-cards,
.selection-title,
.selection-lead,
.sakaime {
  display: none;
}

.payment-block {
  margin-top: calc(80 / 853 * var(--lp-width));
}

.section-belt {
  display: block;
  width: var(--lp-width);
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.hero-copy {
  top: calc(540 / 853 * var(--lp-width));
}

.hero-title {
  width: calc(720 / 853 * var(--lp-width));
}

.hero-subcopy {
  width: calc(500 / 853 * var(--lp-width));
}

.hero-badges {
  bottom: calc(20 / 853 * var(--lp-width));
}

.hero-badges {
  bottom: calc(80 / 853 * var(--lp-width));
}

.hero-block {
  padding-bottom: 0;
  margin-bottom: 0;
}

.hero-badges {
  bottom: calc(130 / 853 * var(--lp-width));
}

.hero-badges {
  bottom: calc(20 / 853 * var(--lp-width));
}

.hero-copy {
  top: calc(570 / 853 * var(--lp-width));
}

/* ===== スマホ対応 ===== */
@media (max-width: 53.3125rem) {

  /* メリットスライダー：2枚表示 */
  .merit-card {
    min-width: calc(100% / 2);
    max-width: calc(100% / 2);
  }

  .merit-bg {
    height: calc(500 / 853 * var(--lp-width));
  }

  .merit-text {
    font-size: calc(14 / 853 * var(--lp-width));
    top: 22%;
  }

  .merit-red {
    font-size: calc(16 / 853 * var(--lp-width));
  }

  /* 比較表 */
  .compare2-area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .compare2-grid {
    font-size: calc(13 / 853 * var(--lp-width));
  }

  /* ハンバーガーメニュー */
  .hamburger-menu {
    width: 200px;
    font-size: 14px;
  }

  /* フッター */
  .footer-inner {
    flex-direction: column;
    align-items: center;
  }

  /* モーダル */
  .footer-modal-inner {
    padding: 20px;
    width: 92%;
  }
}




/* =========================================================
   SP最終上書き：強みカード2枚表示 / 本文位置調整 / 比較表干渉解除
   ========================================================= */
@media (max-width: 53.3125rem) {

  /* セクション全体 */
  .methods-block {
    height: auto !important;
    min-height: 0 !important;
    padding-top: calc(10 / 853 * var(--lp-width)) !important;
    padding-bottom: calc(48 / 853 * var(--lp-width)) !important;
    overflow: hidden !important;
  }

  .methods-title {
    position: relative !important;
    top: 0 !important;
    display: block !important;
    width: calc(760 / 853 * var(--lp-width)) !important;
    max-width: none !important;
    margin: 0 auto calc(20 / 853 * var(--lp-width)) !important;
  }

  /* 強みスライダー全体を中央に戻す */
  .merit-slider-wrap {
    position: relative !important;
    width: calc(790 / 853 * var(--lp-width)) !important;
    max-width: none !important;
    margin: calc(16 / 853 * var(--lp-width)) auto 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: calc(8 / 853 * var(--lp-width)) !important;
  }

  .merit-slider {
    width: calc(690 / 853 * var(--lp-width)) !important;
    flex: 0 0 calc(690 / 853 * var(--lp-width)) !important;
    overflow: hidden !important;
  }

  .merit-track {
    display: flex !important;
    gap: calc(12 / 853 * var(--lp-width)) !important;
    align-items: stretch !important;
    transition: transform 0.3s ease !important;
  }

  /* スマホ2枚表示 */
  .merit-card {
    position: relative !important;
    flex: 0 0 calc((100% - calc(12 / 853 * var(--lp-width))) / 2) !important;
    min-width: calc((100% - calc(12 / 853 * var(--lp-width))) / 2) !important;
    max-width: calc((100% - calc(12 / 853 * var(--lp-width))) / 2) !important;
    height: calc(455 / 853 * var(--lp-width)) !important;
    overflow: hidden !important;
    display: block !important;
  }

  .merit-bg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: center center !important;
  }

  /* 本文をカード内の空白枠に合わせる */
  .merit-text {
    position: absolute !important;
    z-index: 5 !important;

    /* ここが本文枠の位置。上すぎた指定を修正 */
    top: 46% !important;
    left: 10.5% !important;
    right: 10.5% !important;
    bottom: 12% !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    color: #2a170b !important;
    font-size: clamp(7px, 2.05vw, 10px) !important;
    font-weight: 700 !important;
    line-height: 1.52 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  .merit-text p {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .merit-red {
    color: #c21816 !important;
    font-size: clamp(7.5px, 2.15vw, 10.5px) !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
  }

  /* 左右ボタン */
  .merit-prev,
  .merit-next {
    position: relative !important;
    top: calc(-18 / 853 * var(--lp-width)) !important;
    z-index: 20 !important;
    flex: 0 0 calc(38 / 853 * var(--lp-width)) !important;
    width: calc(38 / 853 * var(--lp-width)) !important;
    height: calc(38 / 853 * var(--lp-width)) !important;
    padding: 0 !important;
    font-size: calc(28 / 853 * var(--lp-width)) !important;
    line-height: 1 !important;
  }

  .merit-dots {
    display: flex !important;
    justify-content: center !important;
    gap: calc(8 / 853 * var(--lp-width)) !important;
    margin: calc(12 / 853 * var(--lp-width)) auto calc(42 / 853 * var(--lp-width)) !important;
  }

  /* 比較表を強みから確実に離す */
  .compare2-area {
    position: relative !important;
    z-index: 5 !important;
    width: calc(813 / 853 * var(--lp-width)) !important;
    max-width: none !important;

    /* 元の -150px を完全に潰す */
    margin: calc(42 / 853 * var(--lp-width)) auto calc(26 / 853 * var(--lp-width)) !important;

    padding: calc(20 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width)) calc(16 / 853 * var(--lp-width)) !important;
    overflow: visible !important;
    background: url("./assets/clean/washi-paper.webp") center center / 100% 100% no-repeat !important;
  }

  .compare-heading {
    display: block !important;
    width: calc(650 / 853 * var(--lp-width)) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto calc(10 / 853 * var(--lp-width)) !important;
  }

  /* スクロールは表だけ */
  .compare2-panel {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .compare2-grid {
    display: grid !important;
    width: 720px !important;
    min-width: 720px !important;
    grid-template-columns: 160px 280px 280px !important;
  }

  .compare2-head {
    min-height: 54px !important;
    padding: 9px 8px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  .compare2-item,
  .compare2-data {
    min-height: 62px !important;
    padding: 9px 8px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .compare2-item {
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
  }

  .compare2-item img {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 auto !important;
  }

  .compare2-data strong {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .compare2-data span,
  .compare2-data.small {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .compare2-btn {
    display: inline-block !important;
    min-width: 168px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .compare-note {
    width: 100% !important;
    min-width: 0 !important;
    margin: 8px auto 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  .methods-bottom {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: calc(240 / 853 * var(--lp-width)) !important;
    margin-top: calc(24 / 853 * var(--lp-width)) !important;
  }
}

/* =========================================================
   SP修正：5つの強みタイトル中央寄せ・強み本文枠合わせ
   ========================================================= */
@media (max-width: 53.3125rem) {

  /* 強みセクション全体 */
  .methods-block {
    height: auto !important;
    min-height: 0 !important;
    padding-top: calc(8 / 853 * var(--lp-width)) !important;
    padding-bottom: calc(44 / 853 * var(--lp-width)) !important;
    overflow: hidden !important;
  }

  /* 「買取無双の5つの強み」画像を中央固定 */
  .methods-title {
    display: block !important;
    position: relative !important;
    left: 50% !important;
    top: 0 !important;
    width: calc(760 / 853 * var(--lp-width)) !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
  }

  /* スライダー全体も中央寄せ */
  .merit-slider-wrap {
    position: relative !important;
    width: calc(790 / 853 * var(--lp-width)) !important;
    max-width: none !important;
    margin: calc(22 / 853 * var(--lp-width)) auto 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: calc(8 / 853 * var(--lp-width)) !important;
  }

  .merit-slider {
    width: calc(690 / 853 * var(--lp-width)) !important;
    flex: 0 0 calc(690 / 853 * var(--lp-width)) !important;
    overflow: hidden !important;
  }

  .merit-track {
    display: flex !important;
    gap: calc(12 / 853 * var(--lp-width)) !important;
    align-items: stretch !important;
    transition: transform 0.3s ease !important;
  }

  /* 2枚表示 */
  .merit-card {
    position: relative !important;
    flex: 0 0 calc((100% - calc(12 / 853 * var(--lp-width))) / 2) !important;
    min-width: calc((100% - calc(12 / 853 * var(--lp-width))) / 2) !important;
    max-width: calc((100% - calc(12 / 853 * var(--lp-width))) / 2) !important;
    height: calc(430 / 853 * var(--lp-width)) !important;
    overflow: hidden !important;
  }

  /* 画像は潰さず、カード全体に収める */
  .merit-bg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: center center !important;
  }

  /*
    本文枠合わせ。
    今までは top が上すぎて、本文枠ではなくタイトル周辺に乗っていました。
    左右はやや広め、上下は枠内中央寄せにします。
  */
  .merit-text {
    position: absolute !important;
    z-index: 5 !important;

    top: 39% !important;
    left: 8.5% !important;
    right: 8.5% !important;
    bottom: 14% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #241408 !important;
    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    font-size: clamp(10px, 2.65vw, 13px) !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    letter-spacing: -0.03em !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  .merit-text p {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .merit-red {
    color: #c21816 !important;
    font-size: clamp(11px, 2.85vw, 14px) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
  }

  .merit-prev,
  .merit-next {
    position: relative !important;
    top: calc(-18 / 853 * var(--lp-width)) !important;
    z-index: 20 !important;
    flex: 0 0 calc(38 / 853 * var(--lp-width)) !important;
    width: calc(38 / 853 * var(--lp-width)) !important;
    height: calc(38 / 853 * var(--lp-width)) !important;
    padding: 0 !important;
    font-size: calc(28 / 853 * var(--lp-width)) !important;
    line-height: 1 !important;
  }

  .merit-dots {
    margin: calc(12 / 853 * var(--lp-width)) auto calc(36 / 853 * var(--lp-width)) !important;
  }

  /* 比較表は強みの下へ離す */
  .compare2-area {
    margin-top: calc(38 / 853 * var(--lp-width)) !important;
  }
}

@media (max-width: 53.3125rem) {

  .merit-text {
    position: absolute !important;
    z-index: 5 !important;

    /* 本文枠の中に入れつつ、上下余白を削る */
    top: 39% !important;
    left: 7.5% !important;
    right: 7.5% !important;
    bottom: 8% !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    color: #2a1609 !important;
    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;

    /* 前回より大きく戻す */
    font-size: clamp(10.5px, 2.9vw, 12px) !important;
    font-weight: 800 !important;
    line-height: 1.36 !important;
    letter-spacing: -0.045em !important;
    text-align: left !important;

    overflow: hidden !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .merit-text p {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .merit-red {
    color: #c01816 !important;
    font-size: inherit !important;
    font-weight: 900 !important;
    line-height: inherit !important;
    letter-spacing: -0.05em !important;
  }
}


@media (max-width: 53.3125rem) {
  .merit-text {
    top: 42% !important;
    left: 14% !important;
    right: 14% !important;
    bottom: 10% !important;
    font-size: clamp(9px, 2.5vw, 11.5px) !important;
    line-height: 1.55 !important;
    letter-spacing: -0.03em !important;
    align-items: flex-start !important;
  }

  .merit-red {
    font-size: clamp(9px, 2.5vw, 11.5px) !important;
    line-height: 1.55 !important;
  }
}


@media (max-width: 53.3125rem) {

  /* スライダー全体を少し広げる */
  .merit-slider-wrap {
    width: calc(820 / 853 * var(--lp-width)) !important;
  }

  .merit-slider {
    width: calc(720 / 853 * var(--lp-width)) !important;
    flex: 0 0 calc(720 / 853 * var(--lp-width)) !important;
  }

  /* 2枚表示のままカードを高く大きくする */
  .merit-card {
    flex: 0 0 calc((100% - calc(12 / 853 * var(--lp-width))) / 2) !important;
    min-width: calc((100% - calc(12 / 853 * var(--lp-width))) / 2) !important;
    max-width: calc((100% - calc(12 / 853 * var(--lp-width))) / 2) !important;
    height: calc(540 / 853 * var(--lp-width)) !important;
  }

  /* テキストエリア調整 */
  .merit-text {
    top: 42% !important;
    left: 14% !important;
    right: 14% !important;
    bottom: 8% !important;
    font-size: clamp(10px, 2.7vw, 12.5px) !important;
    line-height: 1.55 !important;
  }

  .merit-red {
    font-size: clamp(10px, 2.7vw, 12.5px) !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 53.3125rem) {
  .merit-text {
    top: 42% !important;
    left: 14% !important;
    right: 14% !important;
    bottom: 8% !important;
    font-size: clamp(12px, 3.3vw, 15px) !important;
    line-height: 1.6 !important;
    letter-spacing: -0.02em !important;
  }

  .merit-red {
    font-size: clamp(13px, 3.5vw, 16px) !important;
    font-weight: 900 !important;
    line-height: 1.6 !important;
  }
}

/* SP時のみ改行表示 */
.sp-br {
  display: none;
}

@media (max-width: 53.3125rem) {
  .sp-br {
    display: block;
  }
}


@media (max-width: 53.3125rem) {
  .compare-note {
    font-size: 10px !important;
    font-weight: 900 !important;
  }
}



@media (max-width: 53.3125rem) {
  .compare2-area {
    background-size: 100% 100% !important;
  }
}

@media (max-width: 53.3125rem) {
  .compare-note {
    transform: translateY(-8px) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 53.3125rem) {
  .methods-bottom {
    position: relative !important;
    width: 100% !important;
    height: calc(280 / 853 * var(--lp-width)) !important;
    margin-top: calc(20 / 853 * var(--lp-width)) !important;
    display: block !important;
    overflow: visible !important;
  }

  .methods-character {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: calc(180 / 853 * var(--lp-width)) !important;
    z-index: 10 !important;
  }

  .methods-balloon {
    display: block !important;
    position: absolute !important;
    left: calc(170 / 853 * var(--lp-width)) !important;
    bottom: calc(80 / 853 * var(--lp-width)) !important;
    width: calc(380 / 853 * var(--lp-width)) !important;
    z-index: 10 !important;
  }

  .methods-flag {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    bottom: calc(20 / 853 * var(--lp-width)) !important;
    width: calc(270 / 853 * var(--lp-width)) !important;
    z-index: 10 !important;
  }
}

@media (max-width: 53.3125rem) {
  .methods-block {
    overflow: visible !important;
  }
}


@media (max-width: 53.3125rem) {
  .methods-block {
    overflow: visible !important;
    padding-bottom: calc(300 / 853 * var(--lp-width)) !important;
  }

  .methods-bottom {
    position: relative !important;
    width: 100% !important;
    height: calc(280 / 853 * var(--lp-width)) !important;
    margin-top: calc(20 / 853 * var(--lp-width)) !important;
    display: block !important;
  }

  .methods-character {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: calc(180 / 853 * var(--lp-width)) !important;
    z-index: 10 !important;
  }

  .methods-balloon {
    display: block !important;
    position: absolute !important;
    left: calc(170 / 853 * var(--lp-width)) !important;
    bottom: calc(80 / 853 * var(--lp-width)) !important;
    width: calc(380 / 853 * var(--lp-width)) !important;
    z-index: 10 !important;
  }

  .methods-flag {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    bottom: calc(20 / 853 * var(--lp-width)) !important;
    width: calc(270 / 853 * var(--lp-width)) !important;
    z-index: 10 !important;
  }
}


@media (max-width: 53.3125rem) {
  .methods-block {
    position: relative !important;
    overflow: visible !important;
  }

  .methods-bottom {
    position: absolute !important;
    bottom: calc(10 / 853 * var(--lp-width)) !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(280 / 853 * var(--lp-width)) !important;
    margin: 0 !important;
  }

  .methods-character {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: calc(180 / 853 * var(--lp-width)) !important;
    z-index: 10 !important;
  }

  .methods-balloon {
    display: block !important;
    position: absolute !important;
    left: calc(170 / 853 * var(--lp-width)) !important;
    bottom: calc(80 / 853 * var(--lp-width)) !important;
    width: calc(380 / 853 * var(--lp-width)) !important;
    z-index: 10 !important;
  }

  .methods-flag {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    bottom: calc(20 / 853 * var(--lp-width)) !important;
    width: calc(270 / 853 * var(--lp-width)) !important;
    z-index: 10 !important;
  }
}

@media (max-width: 53.3125rem) {
  .methods-bottom {
    bottom: calc(-200 / 853 * var(--lp-width)) !important;
  }
}

@media (max-width: 53.3125rem) {
  .methods-block {
    position: relative !important;
  }

  .methods-bottom {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: calc(280 / 853 * var(--lp-width)) !important;
    margin-top: calc(30 / 853 * var(--lp-width)) !important;
    display: block !important;
  }
}

@media (max-width: 53.3125rem) {
  .methods-block {
    height: auto !important;
    padding-bottom: calc(20 / 853 * var(--lp-width)) !important;
  }

  .methods-bottom {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: calc(280 / 853 * var(--lp-width)) !important;
    margin-top: 0 !important;
    display: block !important;
  }
}

@media (max-width: 53.3125rem) {
  .methods-block {
    height: auto !important;
    padding-bottom: 0 !important;
  }

  .methods-bottom {
    height: calc(220 / 853 * var(--lp-width)) !important;
    margin-top: calc(-20 / 853 * var(--lp-width)) !important;
  }

  .methods-balloon {
    bottom: calc(100 / 853 * var(--lp-width)) !important;
  }

  .methods-flag {
    bottom: calc(20 / 853 * var(--lp-width)) !important;
  }

  .methods-character {
    bottom: 0 !important;
  }
}

@media (max-width: 53.3125rem) {
  .methods-character {
    bottom: calc(50 / 853 * var(--lp-width)) !important;
  }
}

@media (max-width: 53.3125rem) {
  .methods-flag {
    right: calc(10 / 853 * var(--lp-width)) !important;
  }
}

@media (max-width: 53.3125rem) {
  .methods-flag {
    width: calc(300 / 853 * var(--lp-width)) !important;
  }
}

.scroll-hint {
  display: none;
}

@media (max-width: 53.3125rem) {
  .scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: calc(8 / 853 * var(--lp-width)) !important;
    padding: calc(6 / 853 * var(--lp-width)) calc(16 / 853 * var(--lp-width));
    background: rgba(0, 0, 0, 0.45);
    border-radius: 999px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    animation: scrollHintFade 2s ease-in-out infinite;
  }

  .scroll-hint-icon {
    color: #f0d060;
    font-size: 18px;
    line-height: 1;
    animation: scrollHintMove 1.2s ease-in-out infinite;
  }

  .scroll-hint-text {
    color: #fff;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  @keyframes scrollHintFade {

    0%,
    100% {
      opacity: 0.6;
    }

    50% {
      opacity: 1;
    }
  }

  @keyframes scrollHintMove {

    0%,
    100% {
      transform: translateX(0);
    }

    25% {
      transform: translateX(-4px);
    }

    75% {
      transform: translateX(4px);
    }
  }
}


@media (max-width: 53.3125rem) {
  .review-cards {
    display: flex !important;
    overflow: hidden !important;
    width: calc(780 / 853 * var(--lp-width)) !important;
    position: relative !important;
  }

  .review-track {
    display: flex !important;
    gap: calc(16 / 853 * var(--lp-width)) !important;
    transition: transform 0.35s ease !important;
  }

  .review-card {
    flex: 0 0 calc((100% - calc(16 / 853 * var(--lp-width))) / 2) !important;
    min-width: calc((100% - calc(16 / 853 * var(--lp-width))) / 2) !important;
    max-width: calc((100% - calc(16 / 853 * var(--lp-width))) / 2) !important;
  }
}

.review-nav {
  display: none;
}

@media (max-width: 53.3125rem) {
  .review-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: calc(16 / 853 * var(--lp-width)) !important;
    margin-top: calc(12 / 853 * var(--lp-width)) !important;
  }

  .review-prev,
  .review-next {
    width: calc(40 / 853 * var(--lp-width)) !important;
    height: calc(40 / 853 * var(--lp-width)) !important;
    background: rgba(59, 31, 17, 0.9) !important;
    border: calc(2 / 853 * var(--lp-width)) solid #c8a227 !important;
    border-radius: 50% !important;
    color: #f0d060 !important;
    font-size: calc(28 / 853 * var(--lp-width)) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .review-dots {
    display: flex !important;
    gap: calc(8 / 853 * var(--lp-width)) !important;
  }

  .review-dot {
    width: calc(10 / 853 * var(--lp-width)) !important;
    height: calc(10 / 853 * var(--lp-width)) !important;
    border-radius: 50% !important;
    background: rgba(200, 162, 39, 0.3) !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
  }

  .review-dot.active {
    background: #c8a227 !important;
  }
}


@media (max-width: 53.3125rem) {
  .review-text {
    top: 40% !important;
    left: 18% !important;
    right: 18% !important;
    bottom: 6% !important;
    font-size: 9px !important;
    line-height: 1.7 !important;
    overflow: hidden !important;
  }
}


@media (max-width: 53.3125rem) {
  .faq-section {
    padding: calc(10 / 853 * var(--lp-width)) calc(10 / 853 * var(--lp-width)) calc(40 / 853 * var(--lp-width)) !important;
  }

  .faq-list {
    width: 92% !important;
    max-width: 92% !important;
    margin: calc(-20 / 853 * var(--lp-width)) auto 0 !important;
  }

  .faq-btn {
    font-size: 13px !important;
    padding: calc(14 / 853 * var(--lp-width)) calc(12 / 853 * var(--lp-width)) !important;
  }

  .faq-q {
    width: 26px !important;
    height: 26px !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }

  .faq-icon {
    font-size: 18px !important;
  }

  .faq-body {
    font-size: 12px !important;
    padding: calc(12 / 853 * var(--lp-width)) calc(12 / 853 * var(--lp-width)) calc(12 / 853 * var(--lp-width)) calc(44 / 853 * var(--lp-width)) !important;
    line-height: 1.7 !important;
  }
}




@media (max-width: 53.3125rem) {
  .site-footer {
    width: 100% !important;
  }

  .footer-inner {
    flex-direction: column !important;
    align-items: center !important;
    padding: calc(24 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width)) calc(10 / 853 * var(--lp-width)) !important;
    gap: calc(16 / 853 * var(--lp-width)) !important;
  }

  .footer-logo img {
    width: calc(200 / 853 * var(--lp-width)) !important;
    margin: 0 auto !important;
  }

  .footer-nav {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .footer-nav ul {
    grid-template-columns: 1fr 1fr !important;
    column-gap: calc(20 / 853 * var(--lp-width)) !important;
    row-gap: calc(12 / 853 * var(--lp-width)) !important;
    justify-items: center !important;
    margin-bottom: 0 !important;
  }

  .footer-nav a,
  .footer-modal-btn {
    font-size: 13px !important;
    text-align: center !important;
  }

  .footer-copy {
    font-size: 11px !important;
    padding: calc(12 / 853 * var(--lp-width)) 0 calc(16 / 853 * var(--lp-width)) !important;
  }
}


/* PC時はreview-trackを通常グリッドに戻す */
@media (min-width: 53.3126rem) {
  .review-cards {
    display: grid !important;
    overflow: visible !important;
  }

  .review-track {
    display: contents !important;
  }

  .review-nav {
    display: none !important;
  }

  .review-card {
    flex: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (min-width: 53.3126rem) {
  .faq-list {
    width: calc(813 / 853 * var(--lp-width)) !important;
    margin: calc(-40 / 853 * var(--lp-width)) auto 0 !important;
  }
}

@media (min-width: 53.3126rem) {
  .faq-section {
    padding: calc(10 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width)) calc(40 / 853 * var(--lp-width)) !important;
    text-align: center !important;
  }

  .faq-list {
    width: calc(813 / 853 * var(--lp-width)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: calc(-40 / 853 * var(--lp-width)) !important;
  }

  .faq-btn {
    font-size: calc(17 / 853 * var(--lp-width)) !important;
    padding: calc(16 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width)) !important;
  }

  .faq-q {
    width: calc(32 / 853 * var(--lp-width)) !important;
    height: calc(32 / 853 * var(--lp-width)) !important;
    font-size: calc(18 / 853 * var(--lp-width)) !important;
  }

  .faq-body {
    font-size: calc(13 / 853 * var(--lp-width)) !important;
    padding: calc(14 / 853 * var(--lp-width)) calc(20 / 853 * var(--lp-width)) calc(14 / 853 * var(--lp-width)) calc(62 / 853 * var(--lp-width)) !important;
  }
}


@media (min-width: 53.3126rem) {
  .faq-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .faq-list {
    width: calc(813 / 853 * var(--lp-width)) !important;
    max-width: calc(813 / 853 * var(--lp-width)) !important;
    margin: calc(-40 / 853 * var(--lp-width)) auto 0 !important;
    align-self: center !important;
  }
}



@media (min-width: 53.3126rem) {
  .faq-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .faq-list {
    width: calc(813 / 853 * var(--lp-width)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


@media (max-width: 53.3125rem) {
  .flow-modal-close {
    width: 48px !important;
    height: 48px !important;
    font-size: 28px !important;
    top: 6px !important;
    right: 6px !important;
  }
}


@media (max-width: 53.3125rem) {
  .compare2-panel {
    overflow: visible !important;
  }

  .compare2-grid {
    grid-template-rows: auto !important;
  }

  .compare2-item,
  .compare2-data {
    min-height: 70px !important;
  }
}

@media (max-width: 53.3125rem) {
  .compare2-panel {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .compare2-grid {
    grid-template-rows: auto !important;
    min-height: 0 !important;
  }

  .compare2-item,
  .compare2-data {
    min-height: 70px !important;
    height: auto !important;
  }
}

@media (max-width: 53.3125rem) {
  .compare2-panel {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .compare2-grid {
    grid-template-rows: auto auto auto auto auto auto auto !important;
    height: auto !important;
  }

  .compare2-data,
  .compare2-item {
    min-height: 70px !important;
    height: auto !important;
    white-space: normal !important;
  }
}


@media (max-width: 53.3125rem) {
  .merit-slider {
    overflow: hidden !important;
    touch-action: pan-y !important;
  }

  .review-cards {
    overflow: hidden !important;
    touch-action: pan-y !important;
  }
}

@media (max-width: 53.3125rem) {
  .merit-slider-wrap {
    position: relative !important;
  }

  .merit-prev,
  .merit-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 32px !important;
  }

  .merit-prev {
    left: 0 !important;
  }

  .merit-next {
    right: 0 !important;
  }
}


/* Brave対応 透過・文字色修正 */
@media (max-width: 53.3125rem) {
  .compare2-area {
    overflow: visible !important;
    background: url("./assets/clean/washi-paper.webp") center center / 100% 100% no-repeat !important;
  }

  .compare2-panel {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: rgba(255, 249, 225, 0.98) !important;
  }

  .compare2-grid {
    grid-template-rows: auto !important;
    background: rgba(255, 249, 225, 0.98) !important;
  }

  .compare2-item {
    background: rgba(240, 220, 180, 0.9) !important;
    color: #241408 !important;
  }

  .compare2-data {
    background: rgba(255, 249, 225, 0.98) !important;
    color: #241408 !important;
  }

  .compare2-data.web {
    background: rgba(192, 57, 43, 0.08) !important;
    color: #b0121a !important;
  }

  .merit-text p,
  .review-text p {
    color: #241408 !important;
  }
}

@media (max-width: 53.3125rem) {
  .merit-bg {
    opacity: 1 !important;
    filter: none !important;
  }

  .merit-text {
    color: #241408 !important;
    -webkit-text-fill-color: #241408 !important;
  }

  .merit-text p {
    color: #241408 !important;
    -webkit-text-fill-color: #241408 !important;
  }

  .merit-red {
    color: #c0392b !important;
    -webkit-text-fill-color: #c0392b !important;
  }

  .merit-card {
    opacity: 1 !important;
    background: transparent !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }
}

@media (max-width: 53.3125rem) {
  .compare2-area {
    background: url("./assets/clean/washi-paper.webp") center center / 100% 100% no-repeat !important;
    -webkit-transform: translateZ(0) !important;
  }

  .compare2-panel {
    background: rgba(255, 249, 225, 0.98) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .compare2-head.item {
    background: linear-gradient(180deg, #61452d, #2e2118) !important;
    color: #fff !important;
  }

  .compare2-head.web {
    background: linear-gradient(180deg, #c51924, #8f0c12) !important;
    color: #fff !important;
  }

  .compare2-head.phone {
    background: linear-gradient(180deg, #c3931a, #8d6509) !important;
    color: #fff !important;
  }

  .compare2-item {
    background: rgba(240, 220, 180, 0.9) !important;
    color: #241408 !important;
  }

  .compare2-data {
    background: rgba(255, 249, 225, 0.98) !important;
    color: #241408 !important;
  }

  .compare2-data.web {
    background: rgba(192, 57, 43, 0.06) !important;
    color: #b0121a !important;
  }

  .compare2-data strong {
    color: #c0392b !important;
  }

  .compare2-btn.red {
    background: linear-gradient(180deg, #e8360a, #a02010) !important;
    color: #fff !important;
  }

  .compare2-btn.gold {
    background: linear-gradient(180deg, #c8a227, #8b6914) !important;
    color: #fff !important;
  }
}

.methods-block {
  background:
    url("./assets/cropped/background2.webp") center center / cover no-repeat !important;
}

.sticky-banner {
  display: none;
}

@media (max-width: 53.3125rem) {
  .sticky-banner {
    display: block;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100vw, 53.3125rem);
    z-index: 99999;
    pointer-events: auto;
  }

  .sticky-banner img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 53.3125rem) {
  .review-nav {
    position: relative !important;
    margin-top: 0 !important;
  }

  .review-prev,
  .review-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 32px !important;
  }

  .review-prev {
    left: 0 !important;
  }

  .review-next {
    right: 0 !important;
  }

  .review-dots {
    position: relative !important;
    z-index: 10 !important;
  }
}

@media (max-width: 53.3125rem) {
  .review-cards {
    position: relative !important;
  }

  .review-nav {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    pointer-events: none !important;
    margin: 0 !important;
  }

  .review-prev,
  .review-next {
    pointer-events: auto !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 32px !important;
    flex-shrink: 0 !important;
  }

  .review-dots {
    pointer-events: auto !important;
  }
}

@media (max-width: 53.3125rem) {
  .review-section {
    position: relative !important;
  }

  .review-cards {
    overflow: hidden !important;
  }

  .review-nav {
    position: absolute !important;
    top: calc(50% - 280px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    pointer-events: none !important;
    margin: 0 !important;
    z-index: 30 !important;
  }

  .review-prev,
  .review-next {
    pointer-events: auto !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 32px !important;
  }

  .review-dots {
    display: none !important;
  }
}



@media (max-width: 53.3125rem) {
  .hamburger-menu {
    width: calc(320 / 853 * var(--lp-width)) !important;
    border-radius: 10px !important;
  }

  .hamburger-menu a {
    font-size: 16px !important;
    padding: 18px 20px !important;
  }

  .hamburger-apply-btn {
    font-size: 16px !important;
    padding: 16px 20px !important;
    margin: 10px 16px !important;
  }

  .hamburger-menu li {
    border-bottom: 1px solid rgba(200, 162, 39, 0.3) !important;
  }
}

@media (max-width: 53.3125rem) {
  .hamburger-menu {
    width: calc(420 / 853 * var(--lp-width)) !important;
    right: 0 !important;
    border-radius: 10px !important;
  }

  .hamburger-menu a {
    font-size: 18px !important;
    padding: 16px 24px !important;
    white-space: nowrap !important;
  }

  .hamburger-apply-btn {
    font-size: 18px !important;
    padding: 16px 24px !important;
    margin: 10px 16px !important;
    white-space: nowrap !important;
  }
}


@media (max-width: 53.3125rem) {
  .hamburger-menu {
    width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    border-radius: 0 !important;
    position: fixed !important;
    height: 100vh !important;
    display: none;
    flex-direction: column !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }

  .hamburger-menu.open {
    display: flex !important;
  }

  .hamburger-menu ul {
    width: 100% !important;
    padding: 40px 0 !important;
  }

  .hamburger-menu li {
    border-bottom: 1px solid rgba(200, 162, 39, 0.3) !important;
  }

  .hamburger-menu a {
    font-size: 22px !important;
    padding: 22px 40px !important;
    white-space: nowrap !important;
  }

  .hamburger-apply-btn {
    font-size: 22px !important;
    padding: 20px 40px !important;
    margin: 16px 30px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

@media (max-width: 53.3125rem) {
  .hamburger-btn {
    z-index: 9999999 !important;
  }
}

@media (max-width: 53.3125rem) {
  .hamburger-menu-close {
    display: block !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(59, 31, 17, 0.85) !important;
    border: 2px solid #c8a227 !important;
    border-radius: 50% !important;
    color: #f0d060 !important;
    font-size: 22px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
  }
}

.pc-side-banner {
  display: none;
}

@media (min-width: 53.3126rem) {
  .pc-side-banner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: fixed;
    top: 50%;
    right: calc(50% - 53.3125rem / 2 - 160px);
    transform: translateY(-50%);
    z-index: 9999;
    width: 140px;
  }

  .pc-side-banner a {
    display: block;
  }

  .pc-side-banner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s;
  }

  .pc-side-banner img:hover {
    opacity: 0.85;
  }
}

@media (min-width: 53.3126rem) {
  .pc-side-banner {
    width: 310px !important;
    right: calc(50% - 53.3125rem / 2 - 330px) !important;
  }
}

.pc-comic-banner {
  display: none;
}

@media (min-width: 53.3126rem) {
  .pc-comic-banner {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: calc(50% - 53.3125rem / 2 - 330px);
    transform: translateY(-50%);
    z-index: 9999;
    width: 300px;
    max-height: 80vh;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    border: 2px solid #c8a227;
  }

  .pc-comic-title {
    background: linear-gradient(180deg, #3b1f11, #1a0a02);
    color: #f0d060;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    padding: 12px 16px;
    line-height: 1.4;
    border-bottom: 2px solid #c8a227;
    flex-shrink: 0;
  }

  .pc-comic-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    background: #1a0a02;
  }

  .pc-comic-scroll img {
    display: block;
    width: 100%;
    height: auto;
  }

  .pc-comic-scroll::-webkit-scrollbar {
    width: 6px;
  }

  .pc-comic-scroll::-webkit-scrollbar-track {
    background: #1a0a02;
  }

  .pc-comic-scroll::-webkit-scrollbar-thumb {
    background: #c8a227;
    border-radius: 3px;
  }
}

@media (min-width: 53.3126rem) {
  .pc-comic-banner {
    width: 360px !important;
    left: calc(50% - 53.3125rem / 2 - 390px) !important;
    max-height: 88vh !important;
  }

  .pc-comic-title {
    font-size: 20px !important;
    padding: 14px 18px !important;
  }
}

@media (min-width: 53.3126rem) {
  .pc-comic-banner {
    width: 18vw !important;
    left: calc(50% - 53.3125rem / 2 - 19vw) !important;
    max-height: 88vh !important;
  }

  .pc-comic-title {
    font-size: 1.2vw !important;
    padding: 0.8vw 1vw !important;
  }

  .pc-side-banner {
    width: 18vw !important;
    right: calc(50% - 53.3125rem / 2 - 19vw) !important;
  }
}

@media (max-width: 1300px) {

  .pc-comic-banner,
  .pc-side-banner {
    display: none !important;
  }
}


.hero-logo {
  top: calc(25 / 853 * var(--lp-width)) !important;
  width: calc(240 / 853 * var(--lp-width)) !important;
}

@media (min-width: 53.3126rem) {
  .pc-side-banner {
    width: min(18vw, 280px) !important;
    right: calc(50% - 53.3125rem / 2 - min(19vw, 300px)) !important;
  }

  .pc-comic-banner {
    width: min(18vw, 290px) !important;
    left: calc(50% - 53.3125rem / 2 - min(19vw, 300px)) !important;
  }
}

.site-footer {
  background: linear-gradient(180deg, #f5ddb2 0%, #e8c98a 50%, #d4a85a 100%) !important;
  border-top: calc(3 / 853 * var(--lp-width)) solid #8b6914 !important;
}

.footer-nav a,
.footer-modal-btn {
  color: #3b1f11 !important;
}

.footer-nav a:hover,
.footer-modal-btn:hover {
  color: #8b6914 !important;
}

.footer-copy {
  color: rgba(59, 31, 17, 0.6) !important;
  border-top: 1px solid rgba(139, 105, 20, 0.4) !important;
}

.footer-nav a,
.footer-modal-btn {
  font-weight: 900 !important;
  font-size: calc(15 / 853 * var(--lp-width)) !important;
}

@media (min-width: 53.3126rem) {
  .footer-nav ul {
    grid-template-columns: 1fr 1fr !important;
    column-gap: calc(30 / 853 * var(--lp-width)) !important;
  }

  .footer-nav a,
  .footer-modal-btn {
    display: block !important;
    text-align: left !important;
  }
}

@media (min-width: 53.3126rem) {
  .footer-inner {
    padding-left: calc(40 / 853 * var(--lp-width)) !important;
  }

  .footer-nav {
    margin-left: calc(60 / 853 * var(--lp-width)) !important;
  }

  .footer-nav ul {
    grid-template-columns: 1fr 1fr !important;
    column-gap: calc(40 / 853 * var(--lp-width)) !important;
  }

  .footer-nav a,
  .footer-modal-btn {
    white-space: nowrap !important;
    text-align: left !important;
    display: block !important;
  }
}

@media (max-width: 53.3125rem) {
  .sticky-banner {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
  }

  .sticky-banner a {
    flex: 1 !important;
    display: block !important;
  }

  .sticky-banner img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}


@media (min-width: 53.3126rem) {
  .sticky-banner {
    display: flex !important;
    flex-direction: row !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(100vw, 53.3125rem) !important;
    position: fixed !important;
    z-index: 99999 !important;
  }

  .sticky-banner a {
    flex: 1 !important;
    display: block !important;
  }

  .sticky-banner img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

@media (max-width: 53.3125rem) {
  .sticky-banner {
    flex-direction: column !important;
  }
}

@media (max-width: 53.3125rem) {
  .sticky-banner {
    flex-direction: column !important;
    width: 100vw !important;
  }

  .sticky-banner a {
    width: 100% !important;
  }
}

@media (max-width: 53.3125rem) {
  .sticky-banner {
    width: 80vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
  }
}

@media (max-width: 53.3125rem) {

  .sticky-banner a,
  .sticky-banner img {
    width: 92% !important;
    margin: 0 auto !important;
    display: block !important;
  }
}



@media (max-width: 53.3125rem) {
  .sticky-banner {
    width: 80vw !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .sticky-banner a {
    width: 100% !important;
    display: block !important;
  }

  .sticky-banner img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

@media (max-width: 53.3125rem) {

  .footer-nav a,
  .footer-modal-btn {
    font-size: 16px !important;
    font-weight: 900 !important;
    padding: 14px 0 !important;
    display: block !important;
  }

  .footer-copy {
    font-size: 13px !important;
    padding-bottom: 120px !important;
  }
}


/* オープニング演出 */
.opening-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999999;
  display: flex;
  overflow: hidden;
}

.opening-fusuma {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.opening-fusuma img {
  width: 200%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.opening-left {
  left: 0;
}

.opening-left img {
  object-position: left center;
}

.opening-right {
  right: 0;
}

.opening-right img {
  object-position: right center;
  transform: scaleX(-1);
}

.opening-moji {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: min(80vw, 400px);
  opacity: 1;
  transition: opacity 0.8s ease;
}

.opening-moji img {
  width: 100%;
  height: auto;
}

.opening-moji.fade-out {
  opacity: 0;
}

.opening-fusuma.slide-left {
  transform: translateX(-100%);
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.opening-fusuma.slide-right {
  transform: translateX(100%);
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.opening-overlay.hidden {
  display: none;
}

.hero-stage {
  top: calc(180 / 853 * var(--lp-width)) !important;
  /* 224→180で上に */
}

.hero-warrior {
  top: calc(20 / 853 * var(--lp-width)) !important;
}

.hero-title {
  position: relative;
  top: calc(100 / 853 * var(--lp-width)) !important;
}

.hero-subcopy {
  position: relative;
  top: calc(80 / 853 * var(--lp-width)) !important;
}


.payment-block {
  transform: translateY(-30px) !important;
}

@media (max-width: 53.3125rem) {
  .review-text {
    transform: translateY(-5px) !important;
  }
}

/* 他社比較表 4列対応 */
.compare2-grid.taisha {
  grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1fr !important;
  min-width: 600px;
}

.compare2-head.rival {
  background: #888 !important;
  color: #fff;
}

.compare2-data.rival {
  background: #f5f5f5;
  color: #666;
  font-size: 0.85em;
  text-align: center;
}