/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
@import url("viewing-offer-tokens.css");

.viewing-offer,
.form-option-demo {
  width: min(74rem, calc(100% - 2rem));
  margin-inline: auto;
}

.viewing-offer h2,
.viewing-offer h3,
.form-option-demo h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.22;
}

.offer-copy p,
.preview-caption p,
.form-option-demo p {
  margin: 0;
  max-width: 65ch;
}


.viewing-offer {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
  border-block: var(--rule-thin) solid var(--color-rule);
}

.viewing-offer::before {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 5rem;
  height: var(--rule-strong);
  background: var(--color-accent);
  content: "";
}

.viewing-offer--live::before {
  background: var(--color-live);
}

.viewing-offer--seminar {
  background: #fff;
}

.offer-heading {
  display: grid;
  gap: var(--space-md);
}

.offer-kicker {
  width: fit-content;
  margin: 0;
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: 999px;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.viewing-offer--live .offer-kicker {
  border-color: var(--color-live);
}

.offer-heading h2 {
  max-width: 18ch;
  font-size: clamp(1.9rem, 4.7vw, 3.2rem);
}

.offer-copy {
  display: grid;
  align-content: end;
  gap: var(--space-sm);
  color: var(--color-ink-2);
}

.offer-layout {
  display: grid;
  gap: var(--space-xl);
}

.page-preview {
  min-width: 0;
  margin: 0;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  color: var(--color-ink);
  overflow: clip;
}

.page-preview iframe {
  display: block;
  width: 100%;
  height: 31rem;
  border: 0;
  background: var(--color-paper);
}

.preview-caption {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  border-block-start: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.preview-caption strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.preview-caption p {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.offer-side {
  display: grid;
  align-content: start;
  gap: var(--space-lg);
}

.price-heading {
  display: grid;
  gap: var(--space-xs);
}

.price-heading h3 {
  font-size: var(--text-xl);
}

.price-heading p {
  margin: 0;
  color: var(--color-muted);
}

.price-list {
  display: grid;
  gap: 0;
  margin: 0;
  border-block: var(--rule-thin) solid var(--color-rule);
}

.price-row {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
}

.price-row + .price-row {
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.price-row dt,
.price-row dd {
  margin: 0;
}

.price-row dt {
  color: var(--color-ink-2);
  font-weight: 700;
}

.price-row dd {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.price-row small {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.price-row--recommended {
  position: relative;
}

.price-row--recommended::after {
  justify-self: start;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  content: "企業・有料配信におすすめ";
  font-size: var(--text-xs);
  font-weight: 700;
}

.pre-post-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.pre-post-note p {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  margin: 0;
}

.pre-post-note span {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.offer-button {
  position: relative;
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-thin) solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.viewing-offer--live .offer-button {
  border-color: var(--color-live);
  background: var(--color-live);
}

.offer-button--secondary {
  background: var(--color-paper);
  color: var(--color-accent-strong);
}

.viewing-offer--live .offer-button--secondary {
  color: var(--color-ink-2);
}

.offer-button:focus-visible,
.option-select:focus-visible {
  outline: 3px solid var(--color-focus-inner);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px var(--color-focus-outer);
}

.offer-button:active,
.offer-button.is-active {
  transform: translateY(1px);
}

.offer-button[aria-disabled="true"],
.offer-button.is-disabled,
.option-select:disabled,
.option-select.is-disabled {
  border-color: var(--color-disabled);
  background: var(--color-paper-3);
  color: var(--color-muted);
  cursor: not-allowed;
  opacity: 0.58;
  pointer-events: none;
}

.offer-button[data-state="loading"],
.offer-button.is-loading {
  cursor: wait;
}

.offer-button[data-state="loading"]::before,
.offer-button.is-loading::before {
  width: 0.9rem;
  height: 0.9rem;
  margin-inline-end: var(--space-xs);
  border: var(--rule-strong) solid var(--color-accent-ink);
  border-inline-end-color: transparent;
  border-radius: 50%;
  content: "";
  animation: offer-spin 800ms linear infinite;
}

.offer-button[data-state="error"],
.offer-button.is-error {
  border-color: var(--color-error);
  background: var(--color-error);
}

.offer-button[data-state="success"],
.offer-button.is-success {
  border-color: var(--color-success);
  background: var(--color-success);
}

.form-option-demo {
  display: grid;
  gap: var(--space-xl);
  padding: var(--space-xl);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.form-option-demo h2 {
  font-size: var(--text-xl);
}

.option-field {
  display: grid;
  gap: var(--space-xs);
  max-width: 34rem;
}

.option-field label {
  font-weight: 700;
}

.option-select {
  min-height: 3rem;
  width: 100%;
  padding-inline: var(--space-md) 2.75rem;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  outline: 3px solid transparent;
  outline-offset: 1px;
  background-color: var(--color-paper);
  color: var(--color-ink);
}

.option-help {
  min-height: 1lh;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.option-select[aria-invalid="true"],
.option-select.is-error {
  border-color: var(--color-error);
}

.option-select.is-success {
  border-color: var(--color-success);
}

.state-preview {
  width: min(74rem, calc(100% - 2rem));
  margin-inline: auto;
  padding: var(--space-lg);
  border: var(--rule-thin) dashed var(--color-rule-strong);
  border-radius: var(--radius-md);
}

.state-preview summary {
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 700;
}

.state-grid {
  display: grid;
  gap: var(--space-md);
  padding-block-start: var(--space-md);
}

.state-row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
}

.state-row > span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@keyframes offer-spin {
  to { transform: rotate(360deg); }
}

@media (hover: hover) and (pointer: fine) {
  .offer-button:hover,
  .offer-button.is-hover {
    background: var(--color-accent-strong);
    transform: translateY(-1px);
  }

  .viewing-offer--live .offer-button:hover,
  .viewing-offer--live .offer-button.is-hover {
    background: var(--color-ink-2);
  }

  .offer-button--secondary:hover,
  .offer-button--secondary.is-hover {
    background: var(--color-paper-3);
    color: var(--color-ink);
  }

  .option-select:hover,
  .option-select.is-hover {
    background-color: var(--color-paper-3);
  }
}

@media (min-width: 40rem) {
  .offer-heading {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
  }

  .offer-kicker {
    grid-column: 1 / -1;
  }

  .price-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .price-row small,
  .price-row--recommended::after {
    grid-column: 1 / -1;
  }

  .pre-post-note {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .offer-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
    align-items: start;
  }

  .page-preview iframe {
    height: 36rem;
  }
}

@media (pointer: coarse) {
  .offer-button,
  .option-select {
    min-height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewing-offer *,
  .viewing-offer *::before,
  .viewing-offer *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}

/* Bright, polished CTA palette for the sample and consultation links */
.offer-button {
  border-color: transparent;
  background: linear-gradient(135deg, #ff9a62 0%, #ff5b8a 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 91, 138, .22);
}
.viewing-offer--live .offer-button {
  border-color: transparent;
  background: linear-gradient(135deg, #ff9a62 0%, #ff5b8a 100%);
}
.offer-button--secondary,
.viewing-offer--live .offer-button--secondary {
  border-color: #ffb4ca;
  background: #fff7fb;
  color: #b42362;
  box-shadow: none;
}

/* Refined B2B palette: cobalt/aqua for viewing, orange for consultation */
.offer-actions .offer-button:not(.offer-button--secondary),
.viewing-offer--live .offer-actions .offer-button:not(.offer-button--secondary) {
  border-color: transparent;
  background: linear-gradient(135deg, #08b6c9 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .22);
}
.offer-actions .offer-button--secondary,
.viewing-offer--live .offer-actions .offer-button--secondary {
  border-color: transparent;
  background: linear-gradient(135deg, #ffb02e 0%, #f07818 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(240, 120, 24, .20);
}

/* Viewing offer: readable headlines and tablet width within legacy layouts. */
.viewing-offer .offer-heading h2 { max-width: none; font-size: clamp(1.75rem, 3vw, 2.6rem); }
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .viewing-offer { width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); margin-inline: 1rem; }
  .viewing-offer .offer-heading { grid-template-columns: minmax(0, 1fr); }
}
.viewing-offer .offer-phrase { display: inline-block; }

/* Compact service description and neutral, flat presentation. */
.viewing-offer{background:#fff;padding-block:32px;gap:22px;border-color:#d9e0e6;font-family:Arial,"Noto Sans JP",sans-serif;}
.viewing-offer::before{display:none;}
.viewing-offer .offer-heading{display:block;}
.viewing-offer .offer-kicker{padding:0;border:0;border-radius:0;margin:0 0 8px;font-size:13px;color:#536577;letter-spacing:0;}
.viewing-offer .offer-heading h2{max-width:none;font-size:clamp(23px,2.6vw,32px);line-height:1.45;letter-spacing:0;color:#153956;}
.viewing-offer .offer-copy{display:block;margin-top:10px;font-size:15px;line-height:1.8;color:#394957;}
.viewing-offer .offer-copy p{max-width:none;}
.viewing-offer .offer-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start;}
.viewing-offer .page-preview{border-radius:4px;background:#fff;}
.viewing-offer .sample-image-link{display:block;line-height:0;}
.viewing-offer .sample-image{display:block;width:100%;height:auto;aspect-ratio:1280/960;object-fit:cover;}
.viewing-offer .preview-caption{padding:9px 12px;background:#f6f7f8;gap:0;}
.viewing-offer .preview-caption strong{font-size:13px;font-weight:500;}
.viewing-offer .offer-side{gap:14px;}
.viewing-offer .price-heading h3{font-size:19px;line-height:1.4;}
.viewing-offer .price-heading p{font-size:12px;line-height:1.6;}
.viewing-offer .price-list{border-color:#d9e0e6;}
.viewing-offer .price-row{grid-template-columns:minmax(0,1fr) auto;padding-block:13px;gap:5px 12px;align-items:center;}
.viewing-offer .price-row dt{font-size:14px;line-height:1.5;}
.viewing-offer .price-row dd{font-family:inherit;font-size:27px;white-space:nowrap;letter-spacing:0;}
.viewing-offer .price-row dd span{font-size:12px;font-weight:400;}
.viewing-offer .price-row small{grid-column:1/-1;font-size:12px;line-height:1.65;}
.viewing-offer .price-row--recommended::after{display:none;}
.viewing-offer .related-option{margin:0;font-size:12px;line-height:1.7;color:#536577;}
.viewing-offer .offer-actions{gap:10px;}
.viewing-offer .offer-actions .offer-button:not(.offer-button--secondary){background:#087f9e;border-color:#087f9e;color:#fff;box-shadow:none;border-radius:5px;padding:12px 18px;font-size:14px;min-height:44px;transform:none;}
.viewing-offer .offer-actions .offer-button--secondary{background:#fff;border-color:#bdc9d2;color:#23435b;box-shadow:none;border-radius:5px;padding:12px 18px;font-size:14px;min-height:44px;transform:none;}
.viewing-offer .offer-actions .offer-button:not(.offer-button--secondary):hover{background:#056b85;}
.viewing-offer .offer-actions .offer-button--secondary:hover{background:#f3f6f8;}
.viewing-offer .offer-actions .offer-button:focus-visible{outline:3px solid #203e59;outline-offset:3px;}
@media(min-width:640px){.viewing-offer .offer-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;}}
@media(min-width:960px){.viewing-offer .offer-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;}}
@media(max-width:639px){.viewing-offer{padding-block:24px;gap:18px;}.viewing-offer .offer-heading h2{font-size:23px;}.viewing-offer .offer-copy{font-size:14px;}.viewing-offer .sample-image{max-height:210px;object-position:top;object-fit:cover;}.viewing-offer .offer-actions .offer-button{flex:1;padding-inline:10px;font-size:13px;}}
.viewing-offer--seminar { width: min(74rem, calc(100% - 2rem)); max-width: calc(100vw - 2rem); margin-inline: auto; }

.viewing-offer .sample-image { aspect-ratio: auto; max-height: none; object-fit: contain; }
.viewing-offer .preview-caption { padding-block: 7px; }