/* ========================================
   Utopia blocks (inc/blocks/utp-blocks.php, assets/js/utp-blocks.js)
   Based on the provided "Utopia LP Blocks" design (.utp-lp-*).
   Loaded on the front end and inside the block editor canvas.
======================================== */

.utp-lp-blocks,
.utp-lp-btnpair,
.utp-fullwide,
.utp-rich-columns,
.utopia-number-list {
  /* --utp-base / --utp-base-fg: Customizer base colour (inc/blocks/utp-blocks.php), when one is set. */
  --utp-lp-accent: var(--utp-base, #00605f);
  --utp-lp-on-accent: var(--utp-base-fg, #fff);
  --utp-lp-accent-ink: var(--utp-base-ink, #00605f); /* base colour as readable text on white */
  --utp-lp-text: #252b2b;
  --utp-lp-muted: #737b7b;
  --utp-lp-border: #dfe5e4;
  --utp-lp-soft: #f5f7f6;
}

.utp-lp-blocks {
  color: var(--utp-lp-text);
  font-size: 15px;
  line-height: 1.8;
  margin-top: 0;
  margin-bottom: 1.75em;
}

.utp-lp-blocks *,
.utp-lp-blocks *::before,
.utp-lp-blocks *::after {
  box-sizing: border-box;
}

.utp-lp-blocks p {
  margin: 0 0 12px;
}

.utp-lp-blocks p:last-child {
  margin-bottom: 0;
}

.utp-lp-noimg {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--utp-lp-soft);
}

/* ── 1. 注意 ───────────────────────────── */

.utp-lp-notice {
  padding: 20px 22px;
  border: 1px solid var(--utp-lp-border);
  border-left: 4px solid var(--utp-notice-border, var(--utp-lp-accent));
  background: var(--utp-notice-bg, var(--utp-lp-soft));
  color: var(--utp-notice-text, var(--utp-lp-text));
}

.utp-lp-notice-label {
  display: block;
  margin-bottom: 6px;
  color: var(--utp-notice-border, var(--utp-lp-accent-ink));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.utp-lp-notice p {
  margin: 0 0 8px;
}

.utp-lp-notice p:last-child {
  margin-bottom: 0;
}

/* ── 3. 回り込み画像 ─────────────────────── */

.utp-lp-float-content {
  display: flow-root;
}

.utp-lp-float-content > img,
.utp-lp-float-content > .utp-lp-float-media img {
  display: block;
  float: left;
  width: min(42%, 320px);
  max-width: none;
  height: auto;
  margin: 0 24px 16px 0;
}

.utp-lp-float-content.is-size-s > img,
.utp-lp-float-content.is-size-s > .utp-lp-float-media img { width: min(30%, 220px); }
.utp-lp-float-content.is-size-l > img,
.utp-lp-float-content.is-size-l > .utp-lp-float-media img { width: min(55%, 460px); }

.utp-lp-float-content.is-right > img,
.utp-lp-float-content.is-right > .utp-lp-float-media img {
  float: right;
  margin: 0 0 16px 24px;
}

/* Size set with a number (px / %) */
.utp-lp-float-content.has-custom-size > img,
.utp-lp-float-content.has-custom-size > .utp-lp-float-media img {
  width: var(--utp-float-w);
  max-width: 100%;
}

/* ── 4. タブ ─────────────────────────────── */

.utp-lp-tabs {
  position: relative;
  min-width: 0;
}

.utp-lp-tabs > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}

.utp-lp-tab-labels {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-x: auto;
}

.utp-lp-tab-labels label {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 20px;
  border: 1px solid var(--utp-lp-border);
  background: #fff;
  color: var(--utp-lp-muted);
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.utp-lp-tab-labels label + label {
  margin-left: -1px;
}

/* Selected tab (per instance: radio name / id are unique per block) */
.utp-lp-tabs > input:nth-of-type(1):checked ~ .utp-lp-tab-labels label:nth-child(1),
.utp-lp-tabs > input:nth-of-type(2):checked ~ .utp-lp-tab-labels label:nth-child(2),
.utp-lp-tabs > input:nth-of-type(3):checked ~ .utp-lp-tab-labels label:nth-child(3),
.utp-lp-tabs > input:nth-of-type(4):checked ~ .utp-lp-tab-labels label:nth-child(4),
.utp-lp-tabs > input:nth-of-type(5):checked ~ .utp-lp-tab-labels label:nth-child(5),
.utp-lp-tabs > input:nth-of-type(6):checked ~ .utp-lp-tab-labels label:nth-child(6),
.utp-lp-tabs > input:nth-of-type(7):checked ~ .utp-lp-tab-labels label:nth-child(7),
.utp-lp-tabs > input:nth-of-type(8):checked ~ .utp-lp-tab-labels label:nth-child(8),
.utp-lp-tabs > input:nth-of-type(9):checked ~ .utp-lp-tab-labels label:nth-child(9),
.utp-lp-tabs > input:nth-of-type(10):checked ~ .utp-lp-tab-labels label:nth-child(10),
.utp-lp-tab-labels label.is-active {
  position: relative;
  z-index: 1;
  border-color: var(--utp-tab-active, var(--utp-lp-accent));
  background: var(--utp-tab-active, var(--utp-lp-accent));
  color: var(--utp-tab-active-fg, var(--utp-lp-on-accent));
}

.utp-lp-tabs > input:focus-visible ~ .utp-lp-tab-labels {
  outline: 2px solid var(--utp-lp-accent);
  outline-offset: 2px;
}

.utp-lp-tab-panels {
  width: 100%;
  margin: -1px 0 0;
  padding: 22px;
  border: 1px solid var(--utp-lp-border);
  background: #fff;
}

.utp-lp-tab-panel {
  display: none;
}

.utp-lp-tabs > input:nth-of-type(1):checked ~ .utp-lp-tab-panels > .utp-lp-tab-panel:nth-child(1),
.utp-lp-tabs > input:nth-of-type(2):checked ~ .utp-lp-tab-panels > .utp-lp-tab-panel:nth-child(2),
.utp-lp-tabs > input:nth-of-type(3):checked ~ .utp-lp-tab-panels > .utp-lp-tab-panel:nth-child(3),
.utp-lp-tabs > input:nth-of-type(4):checked ~ .utp-lp-tab-panels > .utp-lp-tab-panel:nth-child(4),
.utp-lp-tabs > input:nth-of-type(5):checked ~ .utp-lp-tab-panels > .utp-lp-tab-panel:nth-child(5),
.utp-lp-tabs > input:nth-of-type(6):checked ~ .utp-lp-tab-panels > .utp-lp-tab-panel:nth-child(6),
.utp-lp-tabs > input:nth-of-type(7):checked ~ .utp-lp-tab-panels > .utp-lp-tab-panel:nth-child(7),
.utp-lp-tabs > input:nth-of-type(8):checked ~ .utp-lp-tab-panels > .utp-lp-tab-panel:nth-child(8),
.utp-lp-tabs > input:nth-of-type(9):checked ~ .utp-lp-tab-panels > .utp-lp-tab-panel:nth-child(9),
.utp-lp-tabs > input:nth-of-type(10):checked ~ .utp-lp-tab-panels > .utp-lp-tab-panel:nth-child(10),
.utp-lp-tab-panel.is-active {
  display: block;
}

/* ── 5. CTAボタン ────────────────────────── */

.utp-lp-cta {
  padding: 36px 24px;
  border: 1px solid var(--utp-lp-border);
  background: var(--utp-cta-bg, var(--utp-lp-soft));
  color: var(--utp-cta-text, var(--utp-lp-text));
  text-align: center;
}

.utp-lp-blocks .utp-lp-cta-title {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.utp-lp-blocks .utp-lp-cta-text {
  margin-bottom: 22px;
  color: var(--utp-cta-text, var(--utp-lp-muted));
  opacity: .9;
}

.utp-lp-cta .utp-lp-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid var(--utp-cta-btn-bg, var(--utp-lp-accent)) !important;
  background: var(--utp-cta-btn-bg, var(--utp-lp-accent)) !important;
  color: var(--utp-cta-btn-text, var(--utp-lp-on-accent));
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.5;
  transition: opacity .2s;
}

.utp-lp-cta .utp-lp-cta-button:hover,
.utp-lp-cta .utp-lp-cta-button:focus {
  color: var(--utp-cta-btn-text, var(--utp-lp-on-accent));
  text-decoration: none;
  opacity: .85;
}

/* ── 6. アコーディオン ───────────────────── */

.utp-lp-accordion {
  margin: 0 0 10px;
  border: 1px solid var(--utp-lp-border);
  background: #fff;
}

.utp-lp-accordion:last-child {
  margin-bottom: 0;
}

.utp-lp-accordion > .utp-lp-summary {
  position: relative;
  display: block;
  padding: 18px 48px 18px 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.utp-lp-accordion > summary::-webkit-details-marker,
.utp-lp-faq > summary::-webkit-details-marker {
  display: none;
}

.utp-lp-accordion > summary::marker,
.utp-lp-faq > summary::marker {
  content: "";
}

.utp-lp-accordion > .utp-lp-summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 0;
  height: 0;
  border-top: 6px solid var(--utp-lp-accent);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  transform: translateY(-30%);
  transition: transform .2s;
}

.utp-lp-accordion[open] > .utp-lp-summary::after,
.utp-lp-accordion.is-open > .utp-lp-summary::after {
  transform: translateY(-70%) rotate(180deg);
}

.utp-lp-accordion-content {
  padding: 18px 20px 22px;
  border-top: 1px solid var(--utp-lp-border);
}

/* ── 7. 吹き出し ─────────────────────────── */

.utp-lp-speech {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.utp-lp-speech-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

.utp-lp-speech-user img,
.utp-lp-speech-noimg {
  display: block;
  width: 76px;
  height: 76px;
  max-width: none;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
}

.utp-lp-speech-noimg {
  background: var(--utp-lp-border);
}

.utp-lp-speech.is-square .utp-lp-speech-user img,
.utp-lp-speech.is-square .utp-lp-speech-noimg {
  border-radius: 0;
}

.utp-lp-speech-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Text box top = image top (no extra offset from inner margins). */
.utp-lp-speech-text {
  position: relative;
  align-self: start;
  min-width: 0;
  margin: 0;
  padding: 22px 24px;
  border: 1px solid var(--utp-lp-border);
  background: var(--utp-lp-soft);
}

.utp-lp-speech-text > :first-child {
  margin-top: 0;
}

.utp-lp-speech-text::before {
  content: "";
  position: absolute;
  top: 22px;
  left: -8px;
  width: 14px;
  height: 14px;
  border-bottom: 1px solid var(--utp-lp-border);
  border-left: 1px solid var(--utp-lp-border);
  background: var(--utp-lp-soft);
  transform: rotate(45deg);
}

.utp-lp-speech.is-right {
  grid-template-columns: minmax(0, 1fr) 100px;
}

.utp-lp-speech.is-right .utp-lp-speech-user {
  grid-column: 2;
  grid-row: 1;
}

.utp-lp-speech.is-right .utp-lp-speech-text {
  grid-column: 1;
  grid-row: 1;
}

.utp-lp-speech.is-right .utp-lp-speech-text::before {
  left: auto;
  right: -8px;
  transform: rotate(-135deg);
}

/* ── 8. FAQ項目 ──────────────────────────── */

.utp-lp-faq {
  margin: 0 0 10px;
  border: 1px solid var(--utp-lp-border);
  background: #fff;
}

.utp-lp-faq:last-child {
  margin-bottom: 0;
}

.utp-lp-faq > .utp-lp-summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 14px;
  gap: 12px;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.utp-lp-faq-q,
.utp-lp-faq-a {
  color: var(--utp-lp-accent-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

.utp-lp-faq-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid var(--utp-lp-accent);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  transition: transform .2s;
}

.utp-lp-faq[open] .utp-lp-faq-arrow,
.utp-lp-faq.is-open .utp-lp-faq-arrow {
  transform: rotate(180deg);
}

.utp-lp-faq-answer {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 20px 22px;
  border-top: 1px solid var(--utp-lp-border);
}

.utp-lp-faq-answer p {
  margin: 0 0 8px;
}

.utp-lp-faq-answer p:last-child {
  margin-bottom: 0;
}

/* ── 9. ステップ（時間軸） ────────────────── */

.utp-lp-timeline {
  position: relative;
  padding: 4px 0 4px 34px;
}

.utp-lp-timeline-item {
  position: relative;
  padding: 0 0 34px 30px;
}

/* The line: drawn per step (left:0, 2px). It starts at the top edge of the first square
   and, in the last step, runs to the end of that step's content. */
.utp-lp-timeline-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--utp-lp-border);
}

.utp-lp-timeline-item:first-child::before {
  top: 5px;
}

.utp-lp-timeline-item:last-child {
  padding-bottom: 0;
}

.utp-lp-timeline-marker {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: -7px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--utp-lp-accent);
  background: var(--utp-lp-accent);
}

.utp-lp-step-label {
  display: block;
  margin-bottom: 5px;
  color: var(--utp-lp-accent-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.5;
}

.utp-lp-blocks .utp-lp-step-title {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

/* ── 10. ステップ（番号） ─────────────────── */

.utp-lp-number-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.utp-lp-number-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  min-width: 0;
  padding: 24px 0 36px;
  border-bottom: 0; /* no horizontal line at the arrow */
}

.utp-lp-number-step:first-child {
  padding-top: 0;
}

.utp-lp-number-step:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.utp-lp-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--utp-lp-accent);
  background: var(--utp-lp-accent);
  color: var(--utp-lp-on-accent);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}

.utp-lp-number-content {
  min-width: 0;
  padding-top: 2px;
}

.utp-lp-blocks .utp-lp-number-title {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.utp-lp-number-arrow {
  position: absolute;
  bottom: -1px;
  left: 17px;
  z-index: 1;
  width: 0;
  height: 0;
  border-top: 16px solid var(--utp-lp-accent);
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  transform: translateY(50%);
}

/* No arrow after the last step. */
.utp-lp-number-step:last-child .utp-lp-number-arrow {
  display: none;
}

/* ── 11. 評価スター ──────────────────────── */

.utp-lp-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--utp-rate-text, var(--utp-lp-text));
}

.utp-lp-stars {
  position: relative;
  display: inline-block;
  color: var(--utp-star, var(--utp-base, #c99a35)) !important;
  font-size: 23px;
  letter-spacing: 2px;
  line-height: 1.3;
  white-space: nowrap;
}

.utp-lp-stars-bg {
  display: inline-block;
  opacity: .22;
}

.utp-lp-stars-fg {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.utp-lp-rating-score {
  font-size: 17px;
  font-weight: 700;
}

.utp-lp-rating-count {
  color: var(--utp-rate-text, var(--utp-lp-muted));
  font-size: 13px;
  opacity: .85;
}

/* ── 12. 投稿リスト / 2. ボックス ─────────── */

.utp-lp-post-grid,
.utp-lp-box-grid {
  display: grid;
  grid-template-columns: repeat(var(--utp-cols-pc, 4), minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.utp-lp-post-card,
.utp-lp-box-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--utp-lp-border);
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.utp-lp-post-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.utp-lp-blocks a.utp-lp-post-link,
.utp-lp-blocks a.utp-lp-box-card,
.utp-lp-blocks a.utp-lp-post-link:hover,
.utp-lp-blocks a.utp-lp-box-card:hover,
.utp-lp-blocks a.utp-lp-post-link:focus,
.utp-lp-blocks a.utp-lp-box-card:focus {
  color: var(--utp-lp-text);
  text-decoration: none;
}

.utp-lp-blocks a.utp-lp-post-link:hover .utp-lp-post-title,
.utp-lp-blocks a.utp-lp-box-card:hover .utp-lp-box-title {
  color: var(--utp-lp-accent-ink);
}

.utp-lp-post-card .utp-lp-post-img,
.utp-lp-box-card .utp-lp-box-img {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.utp-lp-post-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
}

.utp-lp-post-category {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--utp-lp-accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.utp-lp-blocks .utp-lp-post-title {
  flex: 1 1 auto;
  width: 100%;
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.65;
  overflow-wrap: anywhere;
  transition: color .2s;
}

.utp-lp-post-body time {
  display: block;
  width: 100%;
  margin-top: auto;
  color: var(--utp-lp-muted);
  font-size: 12px;
  line-height: 1.5;
}

.utp-lp-post-empty {
  padding: 18px;
  border: 1px dashed var(--utp-lp-border);
  color: var(--utp-lp-muted);
  text-align: center;
}

.utp-lp-box-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  padding: 18px;
}

.utp-lp-blocks .utp-lp-box-title {
  width: 100%;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
  transition: color .2s;
}

.utp-lp-blocks .utp-lp-box-description {
  flex: 1 1 auto;
  margin: 0;
  color: var(--utp-lp-muted);
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/* ── 13. ボタン ─────────────────────────── */

/* The button group is a fit-content grid: one column per button (row) or one column (column),
   and the whole group is placed left / centre / right with its margins.
   Equal width: the 1fr tracks all take the widest button's width. */
body .utp-lp-btnpair {
  display: grid;
  grid-template-columns: repeat(var(--utp-btn-n, 2), auto);
  justify-content: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin-top: 24px;
  margin-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
body .utp-lp-btnpair.is-equal {
  grid-template-columns: repeat(var(--utp-btn-n, 2), minmax(0, 1fr));
}
body .utp-lp-btnpair.is-column {
  grid-template-columns: auto;
}
body .utp-lp-btnpair.is-equal.is-column {
  grid-template-columns: minmax(0, 1fr);
}
body .utp-lp-btnpair.is-column:not(.is-equal) > .utp-lp-btnpair__btn {
  justify-self: center;
}
body .utp-lp-btnpair.is-column.is-align-left:not(.is-equal) > .utp-lp-btnpair__btn { justify-self: start; }
body .utp-lp-btnpair.is-column.is-align-right:not(.is-equal) > .utp-lp-btnpair__btn { justify-self: end; }
body .utp-lp-btnpair.is-align-left { margin-left: 0; margin-right: auto; }
body .utp-lp-btnpair.is-align-center { margin-left: auto; margin-right: auto; }
body .utp-lp-btnpair.is-align-right { margin-left: auto; margin-right: 0; }

.utp-lp-btnpair > .utp-lp-btnpair__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 14px 24px;
  box-sizing: border-box;
  background: var(--utp-btn-bg, var(--utp-lp-accent)) !important;
  color: var(--utp-btn-text, var(--utp-lp-on-accent));
  border: 1px solid var(--utp-btn-bg, var(--utp-lp-accent)) !important;
  border-radius: 0;
  box-shadow: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s;
}

body .utp-lp-btnpair > .utp-lp-btnpair__btn {
  width: 100%;
}
body .utp-lp-btnpair.is-column:not(.is-equal) > .utp-lp-btnpair__btn {
  width: auto;
}

.utp-lp-btnpair > .utp-lp-btnpair__btn:hover,
.utp-lp-btnpair > .utp-lp-btnpair__btn:focus {
  color: var(--utp-btn-text, var(--utp-lp-on-accent));
  text-decoration: none;
  opacity: .85;
}

/* ── 14. フルワイド ─────────────────────── */

html:has(.utp-fullwide) {
  overflow-x: clip;
}

.utp-fullwide {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-top: 0;
  margin-bottom: 1.75em;
  margin-left: -50vw;
  padding: var(--utp-fw-pt, 64px) 16px var(--utp-fw-pb, 64px);
  background-color: var(--utp-fw-bg, var(--utp-lp-soft));
  background-image: var(--utp-fw-img, none);
  background-position: center;
  background-size: cover;
  color: var(--utp-fw-text, inherit);
  box-sizing: border-box;
}

.utp-fullwide__inner {
  width: 100%;
  max-width: var(--utp-fw-inner, 1100px);
  margin-left: auto;
  margin-right: auto;
}

.utp-fullwide__inner > :first-child { margin-top: 0; }
.utp-fullwide__inner > :last-child { margin-bottom: 0; }

/* ── 15. リスト ─────────────────────────── */

.utp-lp-blocks.utp-list {
  margin-left: 0;
  margin-right: 0;
  padding: 0 0 0 var(--utp-list-indent, 0px);
  list-style: none;
  color: var(--utp-list-text, var(--utp-lp-text));
  counter-reset: utp-list;
}

.utp-lp-blocks.utp-list > li {
  position: relative;
  margin: 0 0 var(--utp-list-gap, 6px);
  padding: 0 0 0 1.5em;
  line-height: var(--utp-list-lh, 1.8);
  list-style: none;
}

.utp-lp-blocks.utp-list > li:last-child {
  margin-bottom: 0;
}

.utp-lp-blocks.utp-list > li::marker {
  content: "";
}

/* only our own marker — never together with the browser / theme marker */
.utp-lp-blocks.utp-list > li::before {
  content: none;
  position: absolute;
  left: 0;
  color: var(--utp-list-marker, var(--utp-lp-accent));
  background: none;
  border: 0;
}

.utp-lp-blocks.utp-list.is-marker-disc > li::before {
  content: "";
  top: calc(var(--utp-list-lh, 1.8) * .5em - 3px);
  left: .35em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--utp-list-marker, var(--utp-lp-accent));
}

.utp-lp-blocks.utp-list.is-marker-number > li {
  counter-increment: utp-list;
  padding-left: 2em;
}

.utp-lp-blocks.utp-list.is-marker-number > li::before {
  content: counter(utp-list) ".";
  color: var(--utp-list-marker, var(--utp-lp-accent-ink));
  top: 0;
  min-width: 1.6em;
  font-weight: 700;
  line-height: var(--utp-list-lh, 1.8);
}

.utp-lp-blocks.utp-list.is-marker-check > li::before {
  content: "";
  top: calc(var(--utp-list-lh, 1.8) * .5em - 6px);
  left: .2em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--utp-list-marker, var(--utp-lp-accent));
  border-bottom: 2px solid var(--utp-list-marker, var(--utp-lp-accent));
  transform: rotate(-45deg);
}

.utp-lp-blocks.utp-list.is-marker-none > li {
  padding-left: 0;
}

.utp-lp-blocks.utp-list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 16. リッチカラム ─────────────────────── */

.utp-rich-columns {
  display: grid;
  grid-template-columns: repeat(var(--utp-cols-pc, 2), minmax(0, 1fr));
  gap: var(--utp-rc-gap, 24px);
  margin-top: 0;
  margin-bottom: 1.75em;
}

.utp-rich-column {
  min-width: 0;
}

.utp-rich-column > :first-child { margin-top: 0; }
.utp-rich-column > :last-child { margin-bottom: 0; }

/* ── Tablet ─────────────────────────────── */

@media (max-width: 900px) {
  .utp-lp-post-grid,
  .utp-lp-box-grid,
  .utp-rich-columns {
    grid-template-columns: repeat(var(--utp-cols-tb, 2), minmax(0, 1fr));
  }
}

/* ── Mobile ─────────────────────────────── */

@media (max-width: 600px) {
  .utp-lp-float-content.has-size-px > img {
    max-width: 50%;
  }

  .utp-lp-float-content:not(.has-custom-size) > img,
  .utp-lp-float-content:not(.has-custom-size) > .utp-lp-float-media img {
    width: 44%;
    margin-right: 16px;
  }

  .utp-lp-float-content.is-right > img,
  .utp-lp-float-content.is-right > .utp-lp-float-media img {
    margin-right: 0;
    margin-left: 16px;
  }

  .utp-lp-tab-labels label {
    padding: 8px 12px;
    min-height: 42px;
    font-size: 13px;
  }

  .utp-lp-tab-panels {
    padding: 16px;
  }

  .utp-lp-cta {
    padding: 28px 18px;
  }

  .utp-lp-blocks .utp-lp-cta-title {
    font-size: 19px;
  }

  .utp-lp-cta .utp-lp-cta-button {
    width: 100%;
    min-width: 0;
  }

  .utp-lp-speech {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
  }

  .utp-lp-speech.is-right {
    grid-template-columns: minmax(0, 1fr) 76px;
  }

  .utp-lp-speech-user img,
  .utp-lp-speech-noimg {
    width: 60px;
    height: 60px;
  }

  .utp-lp-speech-text {
    padding: 16px;
  }

  .utp-lp-speech-text::before {
    top: 20px;
  }

  .utp-lp-faq > .utp-lp-summary {
    grid-template-columns: 24px minmax(0, 1fr) 12px;
    gap: 9px;
    padding: 16px 12px;
  }

  .utp-lp-faq-answer {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    padding: 16px 12px;
  }

  .utp-lp-timeline {
    padding-left: 16px;
  }

  .utp-lp-number-step {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0 34px;
  }

  .utp-lp-number {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  .utp-lp-blocks .utp-lp-number-title {
    font-size: 16px;
  }

  .utp-lp-number-arrow {
    left: 10px;
    border-top-width: 14px;
    border-right-width: 13px;
    border-left-width: 13px;
  }

  .utp-lp-post-grid,
  .utp-lp-box-grid,
  .utp-rich-columns {
    grid-template-columns: repeat(var(--utp-cols-sp, 2), minmax(0, 1fr));
  }

  .utp-lp-post-grid,
  .utp-lp-box-grid {
    gap: 12px;
  }

  .utp-lp-post-body,
  .utp-lp-box-body {
    padding: 12px;
  }

  .utp-lp-blocks .utp-lp-post-title {
    font-size: 14px;
  }

  .utp-lp-blocks .utp-lp-box-title {
    font-size: 15px;
  }

  .utp-lp-blocks .utp-lp-box-description {
    font-size: 13px;
  }

  .utp-fullwide {
    padding-top: calc(var(--utp-fw-pt, 64px) * .7);
    padding-bottom: calc(var(--utp-fw-pb, 64px) * .7);
  }
}

@media (max-width: 480px) {
  body .utp-lp-btnpair {
    gap: 10px;
  }

  /* Phones keep one column per button (3 buttons = 3 columns); long labels wrap. */
  body .utp-lp-btnpair.is-row {
    grid-template-columns: repeat(var(--utp-btn-n, 2), minmax(0, auto));
  }
  body .utp-lp-btnpair.is-row.is-equal {
    grid-template-columns: repeat(var(--utp-btn-n, 2), minmax(0, 1fr));
  }

  .utp-lp-btnpair > .utp-lp-btnpair__btn {
    padding: 12px 14px;
    font-size: 13px;
    white-space: normal;
  }
}

/* ── Editor-only helpers (classes only exist inside the block editor) ── */

.utp-ed-item {
  position: relative;
}

.utp-ed-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.4;
}

.utp-ed-tools button {
  padding: 2px 8px;
  border: 1px solid #c3c4c7;
  border-radius: 2px;
  background: #fff;
  color: #1e1e1e;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
}

.utp-ed-tools button:hover {
  border-color: #1e1e1e;
}

.utp-ed-tools button:disabled {
  opacity: .4;
  cursor: default;
}

.utp-ed-add {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  border: 1px dashed var(--utp-lp-accent, #00605f);
  background: #fff;
  color: var(--utp-lp-accent, #00605f);
  font-size: 13px;
  cursor: pointer;
}

.utp-ed-img-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 80px;
  border: 1px dashed #c3c4c7;
  background: var(--utp-lp-soft, #f5f7f6);
  color: #50575e;
  font-size: 12px;
  cursor: pointer;
}

.utp-ed-input {
  width: 100%;
  margin-top: 6px;
  padding: 4px 6px;
  border: 1px solid #c3c4c7;
  font-size: 12px;
}

.utp-ed-note {
  margin: 4px 0 0;
  color: #757575;
  font-size: 12px;
}

/* Editor canvas: the theme paints every inner-block area white; keep our backgrounds visible. */
[class*="utp-"].block-editor-block-list__layout {
  background: transparent !important;
}

/* Editor canvas: full-bleed inside the constrained layout (which forces margin:auto). */
.editor-styles-wrapper .utp-fullwide {
  left: auto;
  width: auto;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Card / button links: no underline or theme link color (some site types underline content links). */
body .utp-lp-blocks a.utp-lp-post-link,
body .utp-lp-blocks a.utp-lp-box-card,
body .utp-lp-cta a.utp-lp-cta-button,
body .utp-lp-btnpair > a.utp-lp-btnpair__btn {
  text-decoration: none !important;
}
body .utp-lp-blocks a.utp-lp-post-link,
body .utp-lp-blocks a.utp-lp-box-card {
  color: var(--utp-lp-text) !important;
}
body .utp-lp-cta a.utp-lp-cta-button {
  color: var(--utp-cta-btn-text, var(--utp-lp-on-accent)) !important;
}
body .utp-lp-btnpair > a.utp-lp-btnpair__btn {
  color: var(--utp-btn-text, var(--utp-lp-on-accent)) !important;
}

/* ── Colours set in a block always win over theme text colours (p / span / li rules) ── */

body .utp-lp-notice.utp-lp-blocks {
  color: var(--utp-notice-text, var(--utp-lp-text)) !important;
}
body .utp-lp-notice.utp-lp-blocks :is(p, span, li, strong, em, b, i):not(.utp-lp-notice-label) {
  color: inherit !important;
}
body .utp-lp-notice.utp-lp-blocks .utp-lp-notice-label {
  color: var(--utp-notice-border, var(--utp-lp-accent-ink)) !important;
}
body .utp-lp-notice.utp-lp-blocks {
  background: var(--utp-notice-bg, var(--utp-lp-soft)) !important;
  border-color: var(--utp-lp-border) !important;
  border-left-color: var(--utp-notice-border, var(--utp-lp-accent)) !important;
}

body .utp-lp-cta.utp-lp-blocks {
  background: var(--utp-cta-bg, var(--utp-lp-soft)) !important;
  color: var(--utp-cta-text, var(--utp-lp-text)) !important;
}
body .utp-lp-cta.utp-lp-blocks .utp-lp-cta-title {
  color: inherit !important;
}
body .utp-lp-cta.utp-lp-blocks .utp-lp-cta-text {
  color: var(--utp-cta-text, var(--utp-lp-muted)) !important;
}

body .utp-lp-rating.utp-lp-blocks .utp-lp-rating-score {
  color: var(--utp-rate-text, var(--utp-lp-text)) !important;
}
body .utp-lp-rating.utp-lp-blocks .utp-lp-rating-count {
  color: var(--utp-rate-text, var(--utp-lp-muted)) !important;
}
body .utp-lp-rating.utp-lp-blocks .utp-lp-stars span {
  color: inherit !important;
}

body .utp-lp-blocks.utp-list,
body .utp-lp-blocks.utp-list > li {
  color: var(--utp-list-text, var(--utp-lp-text)) !important;
}

body .utp-fullwide.has-text-color .utp-fullwide__inner > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li):not(.has-text-color) {
  color: inherit;
}

/* ── Editor, Desktop preview: always the PC column count (the canvas can be narrower than 900px). ── */

.utp-ed-desktop .utp-lp-box-grid,
.utp-ed-desktop .utp-lp-post-grid,
.utp-ed-desktop.utp-lp-box-grid,
.utp-ed-desktop.utp-lp-post-grid,
.utp-ed-desktop.utp-rich-columns {
  grid-template-columns: repeat(var(--utp-cols-pc, 4), minmax(0, 1fr)) !important;
}

/* ── 丸番号リスト (utp/number-list) ─────────────────── */

.utopia-number-list {
  --utopia-nl-bg: var(--utp-nl-bg, var(--utp-base, #11414a));
  --utopia-nl-fg: var(--utp-nl-fg, var(--utp-base-fg, #ffffff));
  --utopia-nl-border: var(--utp-nl-border, var(--utp-base, #11414a));
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.utopia-number-list > .utopia-number-list__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.utopia-number-list > .utopia-number-list__item::before,
.utopia-number-list > .utopia-number-list__item::marker {
  content: none;
}

.utopia-number-list .utopia-number-list__num {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  border: 1px solid var(--utopia-nl-border);
  border-radius: 50%;
  background: var(--utopia-nl-bg);
  color: var(--utopia-nl-fg) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
}

.utopia-number-list .utopia-number-list__body {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

body .utopia-number-list .utopia-number-list__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}

body .utopia-number-list .utopia-number-list__desc {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .utopia-number-list {
    gap: 16px;
  }
  .utopia-number-list > .utopia-number-list__item {
    gap: 10px;
  }
  .utopia-number-list .utopia-number-list__num {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}

/* Editor canvas: keep the chosen alignment of the button group (constrained layout forces margin:auto). */
.editor-styles-wrapper .utp-lp-btnpair.is-align-left { margin-left: 0 !important; margin-right: auto !important; }
.editor-styles-wrapper .utp-lp-btnpair.is-align-right { margin-left: auto !important; margin-right: 0 !important; }

/* ── Step images (時間軸 / 番号) ── */

.utp-lp-step-img {
  width: 100%;
  max-width: 480px;
  margin: 14px 0 0;
  padding: 0;
}

.utp-lp-step-img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ステップ（番号）: circle numbers */
.utp-lp-number-steps.is-circle .utp-lp-number {
  border-radius: 50%;
}

/* ── 18. お問い合わせフォーム (utp/contact-form) ── */

.utp-contact {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px);
  background: #f5f6f7;
  border-radius: 0;
}

body .utp-contact .utp-contact__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--utp-lp-text);
}

body .utp-contact .utp-contact__desc {
  margin: 0 0 28px;
  color: var(--utp-lp-muted);
  font-size: 15px;
  line-height: 1.8;
}

.utp-contact .utopia-contact-form {
  max-width: none;
  margin: 0;
}

.utp-contact .utopia-contact-form__field {
  margin: 0 0 20px;
}

.utp-contact .utopia-contact-form__field label {
  margin-bottom: 8px;
  color: var(--utp-lp-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.utp-contact .utopia-contact-form__field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--utp-lp-border);
  border-radius: 0;
  background: #fff;
  color: var(--utp-lp-text);
  font-size: 15px;
  line-height: 1.6;
  box-shadow: none;
}

.utp-contact .utopia-contact-form__field :is(input, select, textarea):focus {
  border-color: var(--utp-lp-accent);
  outline: 2px solid color-mix(in srgb, var(--utp-lp-accent) 25%, transparent);
  outline-offset: 0;
}

.utp-contact .utopia-contact-form__submit {
  margin: 28px 0 0;
  text-align: center;
}

body .utp-contact .utopia-contact-form__submit button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid var(--utp-lp-accent);
  border-radius: 0;
  background: var(--utp-lp-accent);
  color: var(--utp-lp-on-accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  transition: opacity .2s;
}

body .utp-contact .utopia-contact-form__submit button:hover {
  opacity: .85;
}

@media (max-width: 600px) {
  body .utp-contact .utopia-contact-form__submit button {
    width: 100%;
    min-width: 0;
  }
}

/* Editor-only notice (block renderer when nothing is selected) */
.utp-ed-placeholder {
  padding: 18px;
  border: 1px dashed var(--utp-lp-border);
  background: #fff;
  color: var(--utp-lp-muted);
  font-size: 13px;
  text-align: center;
}

/* Round shapes: the theme squares every corner inside Utopia containers (border-radius:0 !important),
   so the intended circles of these blocks are restated with higher specificity. */
body .utp-lp-number-steps.is-circle .utp-lp-number,
body .utopia-number-list .utopia-number-list__num,
body .utp-lp-speech.is-circle .utp-lp-speech-user img,
body .utp-lp-speech.is-circle .utp-lp-speech-noimg {
  border-radius: 50% !important;
}