/* =====================================================================
 * swell-compat.css — 旧テーマ(SWELL)時代の本文ブロックを新デザインで表示する
 *
 * 対象 : .page-content__free / .news-single 等の本文内に残る
 *        swell-block-* / swl-* / c-bannerLink / wp-block-* / wpcf7
 * 正   : トップページのデザイントークン（variables.css）
 *        紺 #1a2332 / #112b60 / 青 #1e4d8b ・ 金グラデ #f3e3b6→#d6bb89
 *        見出し Shippori Mincho ・ 本文 Noto Sans JP
 * 追加 : 2026-10-23（サブページのレイアウト崩れ対応）
 * ===================================================================== */

/* ---------- 0. 共通リセット ---------- */
.page-content__free { overflow-wrap: anywhere; }
.page-content__free .c-scrollHint,
.page-content__free .spnone:empty { display: none; }
.page-content__free .swl-marker { background: linear-gradient(transparent 62%, rgba(243, 227, 182, 0.9) 62%); }
.page-content__free .swl-marker.mark_blue  { background: linear-gradient(transparent 62%, rgba(30, 77, 139, 0.16) 62%); }
.page-content__free .swl-inline-color { color: var(--color-blue-primary) !important; }
.page-content__free .swl-fz.u-fz-xs { font-size: 0.8em; }
.page-content__free .swl-fz.u-fz-s  { font-size: 0.9em; }
.page-content__free .swl-fz.u-fz-l  { font-size: 1.1em; }
.page-content__free .swl-fz.u-fz-xl { font-size: 1.35em; }
.page-content__free .u-mb-0 { margin-bottom: 0; }
.page-content__free .has-text-align-center { text-align: center; }
.page-content__free .has-text-align-right  { text-align: right; }

/* 見出し：トップのセクション見出しと同じく明朝＋金のアクセント */
.page-content__free > h2 {
  position: relative;
  padding-bottom: 16px;
  color: var(--color-navy-secondary);
  scroll-margin-top: 120px;
}
.page-content__free > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 2px;
  background: var(--gradient-gold);
}
.page-content__free > h3 {
  padding-left: 14px;
  border-left: 3px solid var(--gradient-gold-end);
  color: var(--color-navy-secondary);
  scroll-margin-top: 120px;
}
.page-content__free h4.wp-block-heading {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  color: var(--color-blue-primary);
}

/* 画像 */
.page-content__free .wp-block-image img { border-radius: var(--radius-md); }
.page-content__free .wp-block-image .alignleft { float: none; margin: 0; }
.page-content__free > * + figure,
.page-content__free > * + .wp-block-image { margin-top: 24px; }
.page-content__free figure.wp-block-image img,
.page-content__free .wp-block-image > figure img { width: auto; max-width: min(100%, 760px); height: auto; margin-inline: auto; }
.page-content__free figure.wp-block-image.size-full img { max-width: min(100%, 960px); }
.page-content__free figure.wp-block-image.size-large img,
.page-content__free .wp-block-column figure.wp-block-image img { width: 100%; max-width: 100%; }
.page-content__free p > img { border-radius: var(--radius-md); width: 100%; height: auto; }

/* ---------- 1. フルワイド帯（swell-block-fullWide） ---------- */
.page-content__free > .swell-block-fullWide:first-child { margin-top: -120px; }
.page-content__free .swell-block-fullWide {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 72px 24px;
  background-color: var(--color-navy-primary);
  background-size: cover;
  background-position: center;
  color: var(--color-white);
}
.page-content__free .swell-block-fullWide.has-bg-img:has(> .swell-block-fullWide__inner > p)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17, 43, 96, 0.72), rgba(17, 43, 96, 0.25));
  pointer-events: none;
}
.page-content__free .swell-block-fullWide__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}
.page-content__free .swell-block-fullWide__inner > * + * { margin-top: 24px; }
.page-content__free .swell-block-fullWide p {
  font-family: 'Shippori Mincho', serif;
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.page-content__free .swell-block-fullWide img { border-radius: 0; width: auto; max-width: min(100%, 520px); }
.page-content__free .swell-block-fullWide .wp-block-spacer { height: 24px !important; }
.page-content__free .swell-block-fullWide .wp-block-image figure { text-align: left; }
.page-content__free .swell-block-fullWide .wp-block-image img { margin-inline: 0; }

/* ---------- 2. コアのカラム（wp-block-columns） ---------- */
.page-content__free .wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 40px;
}
.page-content__free .wp-block-columns > .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.page-content__free .wp-block-column > * + * { margin-top: 16px; }
.page-content__free .wp-block-group__inner-container > * + * { margin-top: 16px; }
.page-content__free .wp-block-columns + .wp-block-columns { margin-top: 56px; }
.page-content__free .wp-block-column h4.wp-block-heading { margin-top: 0; font-size: 22px; }

/* ---------- 3. バナーリンク（ページ内ナビ） ---------- */
.page-content__free .wp-block-columns:has(.swell-block-bannerLink) { align-items: stretch; gap: 16px; }
.page-content__free .swell-block-bannerLink { height: 100%; }
.page-content__free .c-bannerLink {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 88px;
  padding: 16px 20px;
  border: 1px solid var(--color-navy-secondary);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-navy-secondary) !important;
  text-decoration: none !important;
  text-align: center;
  transition: background var(--transition-base), color var(--transition-base);
}
.page-content__free .c-bannerLink:hover {
  background: var(--color-navy-secondary);
  color: var(--color-white) !important;
}
.page-content__free .c-bannerLink__figure { display: none; }
.page-content__free .c-bannerLink__text { color: inherit !important; }
.page-content__free .c-bannerLink__title {
  font-family: 'Shippori Mincho', serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.page-content__free .c-bannerLink__title br { display: none; }
.page-content__free .c-bannerLink__title::after { content: " ↓"; font-size: 0.8em; }

/* ---------- 4. ステップ（swell-block-step） ---------- */
.page-content__free .swell-block-step { counter-reset: hpp-step; }
.page-content__free .swell-block-step__item {
  counter-increment: hpp-step;
  position: relative;
  padding: 0 0 48px 80px;
}
.page-content__free .swell-block-step__item + .swell-block-step__item { margin-top: 0; }
.page-content__free .swell-block-step__item::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: 0;
  width: 1px;
  background: rgba(17, 43, 96, 0.2);
}
.page-content__free .swell-block-step__item:last-child::before { display: none; }
.page-content__free .swell-block-step__number {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-navy-secondary) !important;
  color: var(--gradient-gold-start);
  font-family: var(--font-en-serif);
  line-height: 1;
}
.page-content__free .swell-block-step__number .__label { font-size: 10px; letter-spacing: 0.12em; }
.page-content__free .swell-block-step__number::after {
  content: counter(hpp-step, decimal-leading-zero);
  font-size: 20px;
  margin-top: 2px;
}
.page-content__free .swell-block-step__title {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px !important;
  font-weight: 600;
  color: var(--color-navy-secondary);
  line-height: 56px;
}
.page-content__free .swell-block-step__body > * + * { margin-top: 16px; }
.page-content__free .swell-block-step__body { margin-top: 8px; }

/* ギャラリー（2枚並び） */
.page-content__free .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.page-content__free .wp-block-gallery.has-nested-images .wp-block-image { width: auto !important; margin: 0; }
.page-content__free .wp-block-gallery.has-nested-images.is-cropped img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

/* 縫い目スタイルの段落 */
.page-content__free p.is-style-stitch {
  padding: 20px 24px;
  border: 1px dashed rgba(17, 43, 96, 0.3);
  border-radius: var(--radius-md);
  background: rgba(244, 229, 184, 0.18);
}

/* ---------- 5. ボタン（swell-block-button） ---------- */
.page-content__free .swell-block-button { text-align: center; margin-top: 24px; }
.page-content__free .swell-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  max-width: 100%;
  padding: 16px 40px;
  border-radius: var(--radius-pill);
  background: var(--gradient-gold);
  color: var(--color-navy-primary) !important;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-wide);
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(214, 187, 137, 0.35);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.page-content__free .swell-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(214, 187, 137, 0.45);
}
/* 青ボタン（blue_）はトップの「お問い合わせフォーム」と同じ紺のピル */
.page-content__free .swell-block-button.blue_ .swell-block-button__link {
  background: var(--color-navy-secondary);
  color: var(--color-white) !important;
  box-shadow: 0 6px 16px rgba(17, 43, 96, 0.25);
}

/* ---------- 6. 枠付き段落（料金など） ---------- */
.page-content__free p.has-border {
  padding: 20px 24px;
  border: 1px solid rgba(17, 43, 96, 0.18);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.85);
}
.page-content__free p.has-border.-border01 {
  border-color: var(--gradient-gold-end);
  border-left-width: 4px;
}

/* ---------- 6b. 記事用：囲みボックス・リスト ---------- */
.page-content__free .wp-block-group.has-border {
  padding: 28px 32px;
  border: 1px solid rgba(17, 43, 96, 0.15);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.9);
}
.page-content__free .wp-block-group.is-style-bg_grid {
  background-color: #fbfaf6;
  background-image:
    linear-gradient(rgba(17, 43, 96, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 43, 96, 0.05) 1px, transparent 1px);
  background-size: 16px 16px;
}
.page-content__free ul:is(.is-style-check_list, .is-style-good_list) { padding-left: 0; }
.page-content__free ul:is(.is-style-check_list, .is-style-good_list) li {
  list-style: none;
  position: relative;
  padding-left: 1.8em;
}
.page-content__free ul:is(.is-style-check_list, .is-style-good_list) li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.45em;
  width: 0.55em;
  height: 0.3em;
  border-left: 2px solid var(--gradient-gold-end);
  border-bottom: 2px solid var(--gradient-gold-end);
  transform: rotate(-45deg);
}

/* ---------- 7. SWELL カラム → カードグリッド（施術家一覧・FAQ） ---------- */
.page-content__free .swell-block-columns__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 40px;
  align-items: start;
}
.page-content__free .swell-block-column {
  display: flex;
  flex-direction: column;
  width: auto !important;
  margin: 0 !important;
}
.page-content__free .swell-block-column > * { margin: 0; }
.page-content__free .swell-block-column > * + * { margin-top: 20px; }

/* 写真が先頭にあるカラム＝人物カード */
.page-content__free .swell-block-column:has(> :first-child:is(.wp-block-gallery, .wp-block-image)) {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(17, 43, 96, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(26, 35, 50, 0.08);
  overflow: hidden;
  padding: 0 0 32px;
}
.page-content__free .swell-block-column:has(> :first-child:is(.wp-block-gallery, .wp-block-image)) > :not(:first-child) {
  margin-left: 32px;
  margin-right: 32px;
}
.page-content__free .swell-block-column > :first-child:is(.wp-block-gallery, .wp-block-image) {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.page-content__free .swell-block-column > .wp-block-gallery:first-child .wp-block-image { width: 100% !important; margin: 0; }
.page-content__free .swell-block-column > :first-child:is(.wp-block-gallery, .wp-block-image) img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 0;
}
/* 人物名 */
.page-content__free .swell-block-column > :first-child + p.has-text-align-center {
  margin-top: 28px;
  font-family: 'Shippori Mincho', serif;
  font-size: var(--font-size-xl);
  letter-spacing: 0.1em;
  color: var(--color-navy-secondary);
}
.page-content__free .swell-block-column > :first-child + p.has-text-align-center strong { font-weight: 500; }
.page-content__free .swell-block-column > :first-child + p.has-text-align-center .swl-fz { font-size: inherit; }
.page-content__free .swell-block-column .swell-block-button { margin-top: 16px; }
.page-content__free .swell-block-column .swell-block-button__link { min-width: 220px; padding: 14px 32px; }

/* 人物カード内の項目（得意領域・施術事例…） */
.page-content__free .swell-block-column p.has-border {
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid rgba(17, 43, 96, 0.12);
  border-radius: 0;
  background: none;
  font-size: var(--font-size-sm);
  line-height: 1.9;
}
.page-content__free .swell-block-column p.has-border .swl-fz { font-size: inherit; }
.page-content__free .swell-block-column p.has-border > span:first-child + br + br { display: none; }
.page-content__free .swell-block-column p.has-border .swl-marker {
  background: none;
  display: inline-block;
  margin-bottom: 8px;
  padding-left: 12px;
  border-left: 3px solid var(--gradient-gold-end);
  font-family: 'Shippori Mincho', serif;
  font-size: var(--font-size-base);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-blue-primary);
  line-height: 1.4;
}
.page-content__free .swell-block-column > p:empty { display: none; }
.page-content__free .swell-block-column iframe {
  display: block;
  width: calc(100% - 64px) !important;
  height: 240px !important;
  border: 0;
  border-radius: var(--radius-md);
}

/* ---------- 8. 表 ---------- */
.page-content__free .wp-block-table { overflow-x: auto; }
.page-content__free .wp-block-table table {
  border: 0;
  border-top: 1px solid rgba(26, 35, 50, 0.15);
  font-size: 15px;
}
.page-content__free .wp-block-table :is(thead, tbody, tr) { border: 0; }
.page-content__free .wp-block-table :is(th, td) {
  border: 0 !important;
  border-bottom: 1px solid rgba(26, 35, 50, 0.15) !important;
  padding: 18px 16px;
}
.page-content__free .wp-block-table th,
.page-content__free .wp-block-table td:first-child {
  width: 30%;
  font-weight: 700;
  color: var(--color-navy-secondary);
  white-space: nowrap;
}
.page-content__free > iframe {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-md);
}

/* ---------- 9. フォーム（Contact Form 7） ---------- */
.page-content__free .wpcf7 { margin-top: 40px; }
.page-content__free .wpcf7-form > * + * { margin-top: 24px; }
.page-content__free .wpcf7-form p { line-height: 1.6; font-weight: 700; color: var(--color-navy-secondary); }
.page-content__free .wpcf7-form .yws_red_bold {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-navy-secondary) !important;
  color: var(--gradient-gold-start) !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: 2px;
}
.page-content__free .wpcf7-form-control-wrap { display: block; margin-top: 8px; font-weight: 400; }
.page-content__free .wpcf7-form input:is([type=text], [type=email], [type=tel], [type=number], [type=date], [type=url]),
.page-content__free .wpcf7-form select,
.page-content__free .wpcf7-form textarea {
  width: 100%;
  max-width: 640px;
  padding: 14px 16px;
  border: 1px solid rgba(17, 43, 96, 0.25);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font: inherit;
  font-size: 16px;
  color: var(--color-navy-primary);
  box-sizing: border-box;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.page-content__free .wpcf7-form textarea { min-height: 200px; }
/* 時・分の数値入力は横並びの小さな枠に */
.page-content__free .wpcf7-form-control-wrap:has(> .wpcf7-number) { display: inline-block; margin: 8px 6px 0 0; }
.page-content__free .wpcf7-form input.wpcf7-number { width: 96px; text-align: center; }
.page-content__free .wpcf7-form p:has(.wpcf7-number) { font-weight: 400; }
.page-content__free .wpcf7-form p:has(.wpcf7-number) + p:has(.wpcf7-number) { margin-top: 8px; }
.page-content__free .wpcf7-form :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--color-blue-primary);
  box-shadow: 0 0 0 3px rgba(30, 77, 139, 0.15);
}
.page-content__free .wpcf7-list-item { margin: 0 16px 0 0; font-weight: 400; }
.page-content__free .wpcf7-submit {
  display: inline-block;
  min-width: 260px;
  padding: 16px 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-navy-secondary);
  color: var(--color-white);
  font: inherit;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-wide);
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.page-content__free .wpcf7-submit:hover { opacity: 0.85; }
.page-content__free .wpcf7-form p:has(.wpcf7-submit) { text-align: center; }

/* ---------- SP ---------- */
@media (max-width: 767px) {
  .page-content__free .wp-block-columns { flex-direction: column; align-items: stretch; gap: 20px; }
  .page-content__free .wp-block-columns.revers { flex-direction: column-reverse; }
  .page-content__free .wp-block-columns:has(.swell-block-bannerLink) { flex-direction: column; gap: 10px; }
  .page-content__free .c-bannerLink { min-height: 56px; }
  .page-content__free .c-bannerLink__title { font-size: 16px; }
  .page-content__free .swell-block-fullWide { padding: 48px 20px; }
  .page-content__free > .swell-block-fullWide:first-child { margin-top: -96px; }
  .page-content__free .swell-block-step__item { padding: 0 0 40px 64px; }
  .page-content__free .swell-block-step__item::before { left: 21px; top: 44px; }
  .page-content__free .swell-block-step__number { width: 44px; height: 44px; }
  .page-content__free .swell-block-step__number::after { font-size: 16px; }
  .page-content__free .swell-block-step__title { font-size: 18px !important; line-height: 44px; }
  .page-content__free .swell-block-columns__inner { grid-template-columns: 1fr; gap: 32px; }
  .page-content__free .swell-block-column:has(> :first-child:is(.wp-block-gallery, .wp-block-image)) > :not(:first-child) {
    margin-left: 20px;
    margin-right: 20px;
  }
  .page-content__free .swell-block-column iframe { width: calc(100% - 40px) !important; }
  .page-content__free .swell-block-button__link { min-width: 0; width: 100%; padding: 16px 24px; }
  .page-content__free .wp-block-table :is(th, td:first-child) { white-space: normal; width: 34%; }
}