/* =========================================================
   Liko｜トップ：標準ブロック → 現行デザイン 橋渡しCSS
   本文をWordPress標準ブロックで編集可能にしつつ、見た目を現行に寄せる。
   既存 liko-top.css のクラスは極力そのまま再利用し、ここでは
   「coreブロック特有のズレ」だけを補正する。
   ========================================================= */

/* 1) constrainedレイアウトの中央寄せ・幅制限を解除
      （カード内の要素が中央インデントされる問題を防ぐ） */
.liko-top .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull)) {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* 中央コンテナだけ現行の最大幅・余白に戻す */
.liko-top .container { max-width: 1080px !important; margin-inline: auto !important; padding: 0 22px; }
.liko-top .liko-about .container { max-width: 860px !important; }

/* 2) ブロックが自動挿入する縦マージンを、grid/flex内では無効化（gapで管理） */
.liko-top .features-grid > *,
.liko-top .price-grid > *,
.liko-top .voices-list > *,
.liko-top .liko-layout > *,
.liko-top .secthead > *,
.liko-top .instructor-header > *,
.liko-top .voice-top > *,
.liko-top .badges > *,
.liko-top .price-card-head > *,
.liko-top .liko-access-info > * { margin-block: 0 !important; }

/* 3) coreブロックの余白リセット */
.liko-top .wp-block-group { margin-block: 0; }
.liko-top .wp-block-image { margin: 0; }
.liko-top .wp-block-image img { display: block; }
.liko-top .wp-block-group.section { width: auto; }

/* 4) 画像：coreブロックはclassが<figure>側につくため内側<img>へ再適用 */
.liko-top .wp-block-image.instructor-img { flex-shrink: 0; width: 88px; }
.liko-top .wp-block-image.instructor-img img {
  width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover; object-position: 20% center; border: 1px solid var(--line);
}
.liko-top .wp-block-image.instructor-park img {
  width: 100%; border-radius: 8px; object-fit: cover;
  aspect-ratio: 16/9; object-position: center 40%;
}
.liko-top .wp-block-image.instructor-park { margin-top: 28px; }
.liko-top .wp-block-image.voice-img { flex-shrink: 0; width: 52px; }
.liko-top .wp-block-image.voice-img img {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--line); background: var(--paper-2);
}
.liko-top .wp-block-image.liko-img img {
  width: 100%; border-radius: 8px; object-fit: cover; aspect-ratio: 2/3;
}
.liko-top .wp-block-image.access-photo img {
  width: 100%; aspect-ratio: 16/6; object-fit: cover;
  border-radius: 8px; object-position: center 50%;
}
.liko-top .wp-block-image.access-photo { margin: 0 0 28px; }

/* 5) 区切り線：coreセパレータを現行 .divider に合わせる */
.liko-top .wp-block-separator.divider {
  max-width: none; width: auto; border: none;
  border-top: 1px solid var(--line); margin: 0; opacity: 1;
}

/* 6) ゾーン境界マーカーは非表示（サーバー側でも除去済み） */
.liko-top .liko-zone-split { display: none !important; }

/* 7) Likoの由来：背景・レイアウト・書体（旧インラインstyleをクラス化） */
.liko-top .liko-about { background: var(--olive-tint); }
.liko-top .liko-name {
  font-family: var(--italic); font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--olive);
  margin: 12px 0 20px; letter-spacing: .06em;
}
.liko-top .liko-body p { margin-bottom: 1.2em; }
.liko-top .liko-lead { font-weight: 500; margin-bottom: 10px; }
.liko-top .liko-meanings { line-height: 2.2; margin-bottom: 20px; }
.liko-top .liko-note { font-size: .84em; color: var(--ink-mute); }
.liko-top .liko-place {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .18em;
  color: var(--olive); opacity: .7; margin-top: 24px;
}

/* 8) アクセス住所：dl→編集可能な行ブロックへ再構成（見た目は現行のdl相当） */
.liko-top .liko-access-info { display: flex; flex-direction: column; gap: 8px; margin: 24px 0; }
.liko-top .access-row { display: grid; grid-template-columns: 5em 1fr; gap: 4px 12px; font-size: .84rem; align-items: start; }
.liko-top .access-dt { color: var(--ink-mute); font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; padding-top: 2px; }
.liko-top .access-dd { margin: 0; color: var(--ink-soft); }

/* 9) 見出しブロックの余白リセット（.rule-line は本文にそのまま置く） */
.liko-top .wp-block-heading.sec-title { margin: 0; }

/* 10) 料金リスト：liのspan構成→編集可能な行グループへ（見た目は現行の枠線リスト相当） */
.liko-top .price-list { padding: 16px 20px; margin: 0; }
.liko-top .price-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .82rem; gap: 8px;
}
.liko-top .price-row:last-child { border-bottom: none; }
.liko-top .price-row > * { margin-block: 0 !important; }
.liko-top .price-list > * { margin-block: 0 !important; }

/* 11) 代表挨拶：講師一覧リンクの中央寄せラッパ */
.liko-top .instructor-cta { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; margin-top: 12px; }

/* 12) 修正(2026-08-28)：見出しブロック化で潰れた余白を現行へ戻す
   ・secthead の下余白28px（.wp-block-group既定で0になっていた）
   ・飾り線 rule-line の上余白4px（.secthead > * のリセットで0になっていた）
   → title→線=10px / 線→写真=28px を復元 */
.liko-top .secthead { margin-bottom: 28px !important; }
.liko-top .secthead .rule-line { margin-top: 4px !important; }

/* 13) 修正(2026-08-28)：代表挨拶「氏名」と「肩書」の行間があきすぎ
   氏名・肩書を囲むブロックグループのblock-gap（約24px）を打ち消し、
   現行どおり氏名の margin-bottom 4px のみにする */
.liko-top .instructor-header > .wp-block-group > * { margin-block-start: 0 !important; }

/* ── FAQ（編集可・core Details）：現行アコーディオンの見た目に。Qラベル＝olive ── */
.liko-top .faq-accordion > * { margin-block-start: 0 !important; }
.liko-top .faq-acc-item summary {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px;
  cursor: pointer; list-style: none; font-size: .88rem; color: var(--ink); line-height: 1.6;
}
.liko-top .faq-acc-item summary::-webkit-details-marker { display: none; }
.liko-top .faq-acc-item summary::before {
  content: 'Q'; font-family: var(--italic); font-style: italic; font-size: 1rem;
  color: var(--olive); flex-shrink: 0; line-height: 1;
}
.liko-top .faq-acc-item summary::after {
  content: '+'; font-size: 1.1rem; color: var(--ink-mute); flex-shrink: 0;
  transition: transform .25s; font-weight: 300; margin-left: auto;
}
.liko-top .faq-acc-item[open] summary::after { transform: rotate(45deg); }
.liko-top .faq-acc-item .faq-acc-a { margin: 0; }
@media (max-width: 768px){
  .liko-top .faq-acc-item summary { padding: 18px 16px; font-size: .94rem; line-height: 1.65; }
}