/* =========================================================
   パワーマグ（骨盤底筋・筋力ケアチェア）LPページ専用スタイル
   色・フォント・装飾パターンはサイト共通CSS（style.css / own_expense.css /
   symptoms/css）に合わせている。すべて .pm-page 配下にスコープ。
   ========================================================= */
.pm-page {
  --bg: #ffffff;
  --bg-alt: #ECFBEE;          /* サイト共通の緑バンド背景（own_area2 / head_ttl_area と同じ） */
  --surface: #ffffff;
  --surface-2: #F6F6F6;       /* サイト共通のニュートラル背景（footer-area 等） */
  --ink: #000000;
  --ink-soft: #444444;        /* サイト本文色 body{color:#444} と同じ */
  --ink-faint: #888888;
  --line: #E4E4E4;
  --leaf-green: #22ac38;      /* サイトのメイングリーン */
  --leaf-green-ink: #177726;  /* back-to-top等で使われる濃い緑 */
  --leaf-green-soft: #ECFBEE; /* own_box4 / button_contents 背景と同じ */
  --leaf-blue: #004289;       /* ナビのドロップダウンリンク色と同じ */
  --leaf-blue-ink: #00366f;   /* ヘッダーロゴリンク色と同じ */
  --leaf-blue-soft: #E8EEF6;  /* 緑の淡色と同じ手法で作った淡い青 */
  --warn-bg: #FDF1F1;         /* サイトの警告色 #FB0000 系の淡色 */
  --warn-line: #F3C6C6;
  --warn-ink: #B33A3A;
  --shadow: 0 2px 10px rgba(127,137,161,0.18); /* main-nav ドロップダウンの影色を踏襲 */
  --radius: 10px;             /* symptoms_listbox と同じ角丸 */
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  line-height: 1.9;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  /* 固定ヘッダー（#header）に本文が隠れないよう、他ページの .head_ttl_area と同じ値で確保 */
  padding-top: 150px;
}
@media (max-width: 991px) {
  .pm-page { padding-top: 80px; }
}
@media (max-width: 768px) {
  .pm-page { padding-top: 50px; }
}
.pm-page * { box-sizing: border-box; }
.pm-page img { max-width: 100%; display: block; }
.pm-page a { color: var(--leaf-green); transition: 0.5s; }
.pm-page a:hover { color: #0b6bd3; }
.pm-page h1, .pm-page h2, .pm-page h3 {
  font-family: var(--font-body);
  margin: 0; color: var(--ink); font-weight: 700;
}
.pm-page .wrap { max-width: 880px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.pm-page .wrap-wide { max-width: 1120px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.pm-page section { padding: clamp(48px, 8vw, 96px) 0; }
.pm-page .bg-alt { background: var(--bg-alt); }

/* section-head: サイトの contents_ttlc（太字・中央）＋ contents_ttlsubc（緑・大文字・字間広め）を踏襲 */
.pm-page .section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.pm-page .section-head h2 { font-size: clamp(22px, 3.2vw, 28px); line-height: 1.5; letter-spacing: 0.05em; }
.pm-page .section-head .eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--leaf-green-ink);
  text-transform: uppercase; margin: 10px 0 0;
}
.pm-page .section-head .lead { color: var(--ink-soft); margin-top: 14px; font-size: 15px; }

/* バッジ：list_link のピル（白背景・角丸15px・薄い影）を踏襲 */
.pm-page .badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  padding: 6px 14px; border-radius: 15px; background: #fff; box-shadow: 0 3px 5px rgba(0,0,0,0.22);
  color: var(--leaf-green-ink);
}
.pm-page .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 8px; font-weight: 700; font-size: 15.5px;
  text-decoration: none; cursor: pointer; font-family: var(--font-body);
  transition: 0.3s ease;
}
.pm-page .btn:focus-visible { outline: 3px solid var(--leaf-green); outline-offset: 2px; }
/* button_contents（緑文字・緑太枠・薄緑背景）を踏襲 */
.pm-page .btn-primary {
  background: var(--leaf-green-soft); color: var(--leaf-green-ink); border: 2px solid var(--leaf-green);
}
.pm-page .btn-primary:hover { background: var(--leaf-green); color: #fff; }

/* hero */
.pm-page .hero { padding: clamp(40px, 8vw, 70px) 0 clamp(28px, 6vw, 48px); }
.pm-page .hero-top { text-align: center; max-width: 760px; margin: 0 auto; }
.pm-page .hero-badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.pm-page .hero h1 { font-size: clamp(26px, 4.6vw, 40px); line-height: 1.6; letter-spacing: 0.02em; }
.pm-page .hero h1 em { font-style: normal; color: var(--leaf-blue); border-bottom: 3px solid var(--leaf-blue-soft); }
.pm-page .hero .lede { margin-top: 20px; color: var(--ink-soft); font-size: 16px; max-width: 560px; margin-left: auto; margin-right: auto; }
.pm-page .hero-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.pm-page .hero-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-faint); }

/* path selector：symptoms_listbox（白背景・アクセントカラーの1px枠・角丸10px・影なし）を踏襲 */
.pm-page .path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
@media (max-width: 720px) { .pm-page .path-grid { grid-template-columns: 1fr; } }
.pm-page .path-card {
  display: block; text-decoration: none; color: var(--ink); border-radius: var(--radius);
  padding: 26px 24px; border: 1px solid var(--line); background: var(--surface);
}
.pm-page .path-card.green { border-color: var(--leaf-green); background: var(--leaf-green-soft); }
.pm-page .path-card.blue { border-color: var(--leaf-blue); background: var(--leaf-blue-soft); }
.pm-page .path-card .path-icon { font-size: 28px; margin-bottom: 14px; }
.pm-page .path-card.green .path-icon { color: var(--leaf-green-ink); }
.pm-page .path-card.blue .path-icon { color: var(--leaf-blue); }
.pm-page .path-card .tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.pm-page .path-card.green .tag { color: var(--leaf-green-ink); }
.pm-page .path-card.blue .tag { color: var(--leaf-blue); }
.pm-page .path-card h3 { font-size: 20px; margin-top: 8px; line-height: 1.5; }
.pm-page .path-card p { color: var(--ink-soft); font-size: 14.5px; margin-top: 10px; }
.pm-page .path-card .go { margin-top: 18px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.pm-page .path-card.green .go { color: var(--leaf-green-ink); }
.pm-page .path-card.blue .go { color: var(--leaf-blue); }

/* video block */
.pm-page .video-section { scroll-margin-top: 110px; }
.pm-page .video-shell { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .pm-page .video-shell { grid-template-columns: 1fr; } }
.pm-page .video-shell.reverse { direction: rtl; }
.pm-page .video-shell.reverse > * { direction: ltr; }
.pm-page .video-frame {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 9/16; width: 100%; max-width: 300px;
  margin: 0 auto; border: 1px solid var(--line);
}
.pm-page .video-frame.green { background: var(--leaf-green-soft); border-color: var(--leaf-green); }
.pm-page .video-frame.blue { background: var(--leaf-blue-soft); border-color: var(--leaf-blue); }
.pm-page .video-frame .play-btn {
  position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 999px;
  background: rgba(255,255,255,0.95); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 5px rgba(0,0,0,0.22);
}
.pm-page .video-frame.green .play-btn { color: var(--leaf-green-ink); }
.pm-page .video-frame.blue .play-btn { color: var(--leaf-blue); }
.pm-page .video-frame .play-btn i { font-size: 20px; margin-left: 3px; }
.pm-page .video-frame .caption {
  position: absolute; left: 10px; right: 10px; bottom: 14px; text-align: center;
  color: var(--ink); font-weight: 700; font-size: 14px; line-height: 1.6;
  background: rgba(255,255,255,0.88); border-radius: 6px; padding: 8px 10px;
}
.pm-page .video-frame .mockup-tag {
  position: absolute; top: 12px; left: 12px; right: 12px; text-align: center; font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,0.4); padding: 4px 9px; border-radius: 15px;
}

/* 実際の動画（アスペクト比は動画本来の比率のまま、枠だけサイトの意匠に合わせる） */
.pm-page .video-media { max-width: 360px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #000; }
.pm-page .video-media video { width: 100%; height: auto; display: block; }
.pm-page .video-caption { margin-top: 14px; text-align: center; font-weight: 700; font-size: 14px; color: var(--ink); }
.pm-page .video-copy .tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.pm-page .video-copy.green .tag { color: var(--leaf-green-ink); }
.pm-page .video-copy.blue .tag { color: var(--leaf-blue); }
.pm-page .video-copy h2 { font-size: clamp(20px, 2.8vw, 26px); margin-top: 10px; line-height: 1.6; letter-spacing: 0.03em; }
.pm-page .video-copy .points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.pm-page .video-copy .points li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-soft); align-items: flex-start; }
.pm-page .video-copy .points li .dot { flex: none; width: 8px; height: 8px; border-radius: 999px; margin-top: 8px; }
.pm-page .video-copy.green .dot { background: var(--leaf-green); }
.pm-page .video-copy.blue .dot { background: var(--leaf-blue); }
.pm-page .video-copy .fine { margin-top: 18px; font-size: 12.5px; color: var(--ink-faint); }

/* mechanism：カードは白背景＋薄い枠線のみ（影なし）でサイトのフラットな作りに合わせる */
.pm-page .mech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 780px) { .pm-page .mech-grid { grid-template-columns: 1fr; } }
.pm-page .mech-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; }
.pm-page .mech-step { font-size: 12.5px; color: var(--leaf-green-ink); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.pm-page .mech-card h3 { font-size: 17px; margin-top: 10px; line-height: 1.5; }
.pm-page .mech-card p { font-size: 14.5px; color: var(--ink-soft); margin-top: 10px; }
.pm-page .mech-diagram { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 4vw, 40px); margin-bottom: 22px; }
.pm-page .mech-diagram svg { width: 100%; height: auto; display: block; }
.pm-page .mech-diagram .diagram-caption { text-align: center; font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }

/* product section */
.pm-page .product-shell { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .pm-page .product-shell { grid-template-columns: 1fr; } }
/* 未掲載の写真はサイトの own_box2 と同じ「点線」の作法を流用し、準備中であることを示す */
.pm-page .photo-placeholder {
  aspect-ratio: 1/1; border-radius: var(--radius); border: 2px dashed var(--line);
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 13px; text-align: center; padding: 20px; line-height: 1.7;
}
.pm-page .product-photo {
  position: relative; aspect-ratio: 1/1; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden;
}
.pm-page .product-photo img { width: 100%; height: 100%; object-fit: cover; }
.pm-page .product-photo .photo-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px; font-size: 12px; font-weight: 700;
  color: #fff; background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.pm-page .callout-dot {
  position: absolute; width: 26px; height: 26px; border-radius: 999px; background: var(--leaf-green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  box-shadow: 0 0 0 5px rgba(34,172,56,0.22); transform: translate(-50%, -50%);
}
.pm-page .callout-dot-1 { left: 23%; top: 44%; }
.pm-page .callout-dot-2 { left: 50%; top: 60%; }
.pm-page .product-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pm-page .product-features li { display: flex; gap: 14px; align-items: flex-start; }
.pm-page .product-features .num {
  flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--leaf-green); color: #fff;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.pm-page .product-features .t { font-weight: 700; font-size: 15px; color: var(--ink); }
.pm-page .product-features .d { font-size: 14px; color: var(--ink-soft); margin-top: 3px; }

.pm-page .panel-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
@media (max-width: 620px) { .pm-page .panel-gallery { grid-template-columns: 1fr; } }
.pm-page .panel-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.pm-page .panel-card .panel-photo-placeholder {
  aspect-ratio: 4/3; background: var(--surface-2); border-bottom: 2px dashed var(--line); color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; text-align: center; padding: 16px;
}
.pm-page .panel-card .panel-photo { display: block; aspect-ratio: 4/3; width: 100%; object-fit: cover; }
.pm-page .panel-card .panel-caption { padding: 14px 18px; background: var(--surface); }
.pm-page .panel-card .panel-caption .t { font-size: 14px; font-weight: 700; color: var(--ink); }
.pm-page .panel-card .panel-caption .d { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }

/* benefits：own_ttl2 / contents_name と同じ「緑の強調ラベル」を踏襲 */
.pm-page .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 780px) { .pm-page .benefit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pm-page .benefit-grid { grid-template-columns: 1fr; } }
.pm-page .benefit-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; font-size: 14.5px; color: var(--ink-soft); }
.pm-page .benefit-item .k { font-weight: 700; color: var(--leaf-green-ink); display: block; margin-bottom: 4px; }

/* audience */
.pm-page .audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .pm-page .audience-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pm-page .audience-grid { grid-template-columns: 1fr; } }
.pm-page .audience-item { background: var(--surface-2); border-radius: var(--radius); padding: 20px 16px; font-size: 14px; color: var(--ink-soft); text-align: center; }

/* flow */
.pm-page .flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: flow; position: relative; }
@media (max-width: 860px) { .pm-page .flow { grid-template-columns: 1fr; gap: 18px; } }
.pm-page .flow-item { position: relative; padding: 0 18px; }
.pm-page .flow-item:first-child { padding-left: 0; }
.pm-page .flow-item:last-child { padding-right: 0; }
.pm-page .flow-num {
  counter-increment: flow; width: 32px; height: 32px; border-radius: 999px; background: var(--leaf-green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
  margin-bottom: 14px;
}
.pm-page .flow-num::before { content: counter(flow); }
.pm-page .flow-item h3 { font-size: 16px; }
.pm-page .flow-item p { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; }
@media (min-width: 861px) {
  .pm-page .flow-item:not(:last-child)::after {
    content: ""; position: absolute; top: 16px; left: calc(100% - 18px + 16px); width: calc(100% - 32px);
    height: 1px; background: var(--line);
  }
}

/* pricing：own_table2（灰色ヘッダー・罫線）を踏襲しつつ少し柔らかく */
.pm-page .price-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.pm-page table.price-table { width: 100%; border-collapse: collapse; }
.pm-page table.price-table th, .pm-page table.price-table td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.pm-page table.price-table thead th { background: var(--surface-2); color: var(--ink-soft); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }
.pm-page table.price-table td.price { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--leaf-green-ink); }
.pm-page table.price-table tr:last-child td, .pm-page table.price-table tr:last-child th { border-bottom: none; }
.pm-page .price-table-scroll { overflow-x: auto; }
.pm-page .price-note { padding: 16px 20px; font-size: 13px; color: var(--ink-faint); border-top: 1px solid var(--line); }

/* risk callout：own_txrl / point_r と同じ「赤」を警告色として使用 */
.pm-page .risk-card { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius); padding: 26px 24px; }
.pm-page .risk-card h3 { font-size: 17px; color: var(--warn-ink); font-weight: 700; }
.pm-page .risk-card ul { margin: 14px 0 0; padding-left: 20px; color: var(--ink); font-size: 14.5px; }
.pm-page .risk-card li { margin-bottom: 6px; }
.pm-page .risk-card .fine { margin-top: 16px; font-size: 12.5px; color: var(--warn-ink); }

/* faq：own_box2 と同じ「緑の点線区切り」を踏襲。開閉はJS（power_mag.js）でアニメーション */
.pm-page .faq-item { border-bottom: 2px dashed var(--leaf-green); }
.pm-page .faq-item summary {
  cursor: pointer; padding: 18px 4px; font-weight: 700; font-size: 15.5px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center; color: var(--ink);
  transition: color 0.2s ease;
}
.pm-page .faq-item summary::-webkit-details-marker { display: none; }
.pm-page .faq-item summary::after {
  content: "+"; display: inline-block; font-size: 20px; font-weight: 700; color: var(--leaf-green); flex: none;
  transition: transform 0.25s ease;
}
.pm-page .faq-item[open] summary::after { transform: rotate(45deg); }
.pm-page .faq-item .faq-body { overflow: hidden; transition: height 0.25s ease; }
.pm-page .faq-item p { margin: 0 0 18px 4px; color: var(--ink-soft); font-size: 14.5px; padding-right: 30px; }

/* clinic */
.pm-page .clinic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 780px) { .pm-page .clinic-grid { grid-template-columns: 1fr; } }
.pm-page .map-block {
  aspect-ratio: 4/3; border-radius: var(--radius); background: var(--surface-2); border: 2px dashed var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 13px; text-align: center; padding: 20px;
}
.pm-page .clinic-info dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 14.5px; }
.pm-page .clinic-info dt { color: var(--ink-faint); font-weight: 700; }
.pm-page .clinic-info dd { margin: 0; color: var(--ink); }
.pm-page .clinic-info .note { color: var(--ink-faint); font-size: 12.5px; }
.pm-page .clinic-info .hero-ctas { margin-top: 28px; justify-content: flex-start; }

.pm-page .pm-disclaimer {
    max-width: 1120px;
    margin: 0 auto;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    font-size: 12px;
    color: var(--ink-faint);
    line-height: 1.8;
}