/**
 * =====================================================
 * LP風ブログ用スタイルシート
 * =====================================================
 * 
 * ファイル配置: /wp-content/themes/[テーマ名]/css/lp-blocks.css
 */

/* ========================================
   CSS変数（カラー設定）
   ======================================== */
:root {
  /* メインカラー（院のブランドカラーに合わせて変更） */
  --lp-primary-color: #2e8b57;
  --lp-primary-light: #3da86a;
  --lp-primary-dark: #236b43;
  
  /* アクセントカラー */
  --lp-secondary-color: #ff6b35;
  --lp-secondary-light: #ff8a5c;
  
  /* テキスト */
  --lp-text-color: #333333;
  --lp-text-light: #666666;
  --lp-text-muted: #999999;
  
  /* 背景 */
  --lp-bg-white: #ffffff;
  --lp-bg-light: #f9f9f9;
  --lp-bg-accent: #fff8f0;
  
  /* ボーダー */
  --lp-border-color: #e0e0e0;
  
  /* その他 */
  --lp-border-radius: 8px;
  --lp-box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --lp-transition: 0.3s ease;
}


/* ========================================
   共通スタイル
   ======================================== */

/* セクションタイトル */
.lp-section-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 2.5rem 0 1.5rem;
  color: var(--lp-text-color);
  line-height: 1.4;
}

.lp-section-title__deco {
  color: var(--lp-secondary-color);
  margin: 0 0.3rem;
}

/* セクションリード文 */
.lp-section-lead {
  text-align: center;
  color: var(--lp-text-light);
  margin-bottom: 1.5rem;
}

/* ========================================
   推薦セクション（医師・アスリート共通）
   ======================================== */
.lp-recommendation {
  margin: 2rem 0;
  text-align: center;
}

.lp-recommendation__title-image {
  margin-bottom: 1.5rem;
}

.lp-recommendation__title-image img {
  max-width: 100%;
  height: auto;
}

.lp-recommendation__content-image img {
  max-width: 100%;
  height: auto;
}


/* ========================================
   CTA（予約誘導）- 画像ベース
   ======================================== */
.lp-cta {
  margin: 2rem 0;
  text-align: center;
}

.lp-cta__tel {
  margin-bottom: 1rem;
}

.lp-cta__tel a {
  display: inline-block;
  transition: opacity var(--lp-transition);
}

.lp-cta__tel a:hover {
  opacity: 0.8;
}

.lp-cta__tel img {
  max-width: 100%;
  height: auto;
}

.lp-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.lp-cta__button {
  display: inline-block;
  transition: opacity var(--lp-transition);
}

.lp-cta__button:hover {
  opacity: 0.8;
}

.lp-cta__button img {
  max-width: 100%;
  height: auto;
}


/* ========================================
   選ばれる9つの理由
   ※既存サイトの comparison_area クラスを使用
   ※以下は既存CSSがない場合のフォールバック用
   ======================================== */

/*
 * 既存サイトで使用しているクラス:
 * .tx-c, .noto-serif, .noto-midashi, .mb10, .mb80, .orange, .text70
 * .comparison_area, .box2-title, .box2, .img, .mb30, .mb60, .b
 * 
 * これらは既存テーマのCSSで定義されているため、
 * ここでは追加のスタイルは不要です。
 */


/* ========================================
   利用者様の声 - 画像見出し対応
   ======================================== */
.lp-voice {
  margin: 2rem 0;
}

.lp-voice__title-image {
  text-align: center;
  margin-bottom: 1.5rem;
}

.lp-voice__title-image img {
  max-width: 100%;
  height: auto;
}

.lp-voice__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.lp-voice__item {
  background: var(--lp-bg-white);
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  padding: 1.5rem;
}

.lp-voice__body {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.lp-voice__comment-area {
  flex: 1;
}

.lp-voice__comment {
  line-height: 1.8;
  margin-bottom: 1rem;
  color: var(--lp-text-color);
}

.lp-voice__name {
  font-weight: bold;
  color: var(--lp-text-color);
  margin-bottom: 0.5rem;
}

.lp-voice__photo {
  flex-shrink: 0;
}

.lp-voice__photo img {
  width: 150px;
  height: auto;
  border-radius: var(--lp-border-radius);
}

.lp-voice__note {
  font-size: 0.8rem;
  color: var(--lp-text-muted);
}


/* ========================================
   書籍掲載実績
   ======================================== */
.lp-media {
  margin: 2rem 0;
  text-align: center;
}

.lp-media__image img {
  max-width: 100%;
  height: auto;
}


/* ========================================
   臨床試験
   ======================================== */
.lp-evidence {
  margin: 2rem 0;
  text-align: center;
}

.lp-evidence__image img {
  max-width: 100%;
  height: auto;
}

.lp-evidence__image img.mb40 {
  margin-bottom: 40px;
}


/* ========================================
   施術料金表
   ======================================== */
.lp-price {
  margin: 2rem 0;
}

.lp-price__table-wrapper {
  overflow-x: auto;
}

.lp-price__table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: var(--lp-bg-white);
}

.lp-price__table th,
.lp-price__table td {
  border: 1px solid var(--lp-border-color);
  padding: 0.8rem 1rem;
  text-align: center;
}

.lp-price__table th {
  background: #EB7800;
  color: #fff;
  font-weight: bold;
}

.lp-price__table td:first-child {
  background: var(--lp-bg-light);
}

.lp-price__table-highlight td {
  background: var(--lp-bg-accent) !important;
  font-weight: bold;
  color: var(--lp-secondary-color);
}

.lp-price__note {
  font-size: 0.85rem;
  color: var(--lp-text-muted);
  line-height: 1.6;
}


/* ========================================
   よくある質問
   ======================================== */
.lp-faq {
  margin: 2rem 0;
}

.lp-faq__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lp-faq__item {
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  overflow: hidden;
}

.lp-faq__question {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--lp-bg-light);
  padding: 1rem 1.2rem;
  font-weight: bold;
}

.lp-faq__q {
  color: var(--lp-primary-color);
  font-size: 1.2rem;
  font-weight: bold;
  flex-shrink: 0;
}

.lp-faq__question-text {
  color: var(--lp-text-color);
  line-height: 1.5;
}

.lp-faq__answer {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem 1.2rem;
  background: var(--lp-bg-white);
}

.lp-faq__a {
  color: var(--lp-secondary-color);
  font-size: 1.2rem;
  font-weight: bold;
  flex-shrink: 0;
}

.lp-faq__answer-text {
  color: var(--lp-text-color);
  line-height: 1.8;
}


/* ========================================
   院長メッセージ - 画像ベース
   ======================================== */
.lp-message {
  margin: 2rem 0;
}

.lp-message__title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--lp-text-color);
  line-height: 1.4;
}

.lp-message__image {
  text-align: center;
  margin-bottom: 1.5rem;
}

.lp-message__image img {
  max-width: 100%;
  height: auto;
}

.lp-message__content {
  max-width: 800px;
  margin: 0 auto;
}

.lp-message__content p {
  line-height: 1.8;
  margin-bottom: 1rem;
  color: var(--lp-text-color);
}


/* ========================================
   最終CTA＋院情報 - 画像ベース
   ======================================== */
.lp-final-cta {
  margin: 2rem 0;
  text-align: center;
}

.lp-final-cta__flow {
  margin: 2rem 0;
}

.lp-final-cta__flow img {
  max-width: 100%;
  height: auto;
}

.lp-final-cta__mail-banner {
  margin-top: 1.5rem;
}

.lp-final-cta__mail-banner a {
  display: inline-block;
  transition: opacity var(--lp-transition);
}

.lp-final-cta__mail-banner a:hover {
  opacity: 0.8;
}

.lp-final-cta__mail-banner img {
  max-width: 100%;
  height: auto;
}


/* ========================================
   関連リンク
   ======================================== */
.lp-related {
  background: var(--lp-bg-light);
  padding: 1.5rem 2rem;
  border-radius: var(--lp-border-radius);
  margin: 2rem 0;
}

.lp-related__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp-related__list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--lp-border-color);
}

.lp-related__list li:last-child {
  border-bottom: none;
}

.lp-related__list a {
  color: var(--lp-primary-color);
  text-decoration: none;
  transition: color var(--lp-transition);
}

.lp-related__list a:hover {
  color: var(--lp-primary-dark);
  text-decoration: underline;
}


/* ========================================
   レスポンシブ対応
   ======================================== */

/* SP用改行 */
.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .sp-only {
    display: inline;
  }
  
  /* 利用者の声 */
  .lp-voice__body {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }
  
  .lp-voice__photo img {
    width: 120px;
  }
  
  /* セクションタイトル */
  .lp-section-title,
  .lp-reasons__title,
  .lp-message__title {
    font-size: 1.2rem;
  }
  
  /* CTAボタン */
  .lp-cta__buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* ========================================
   ブログ記事用 見出しスタイル
   ======================================== */
 
/* --- h2: 大見出し --- */
.blog-article h2 {
  font-size: 22px !important;
  color: #c46300 !important;
  border-left: 5px solid #EB7800 !important;
  padding: 8px 0 8px 16px !important;
  margin: 48px 0 20px !important;
  background: #fef6ec !important;
}
 
/* --- h3: 小見出し --- */
.blog-article h3 {
  font-size: 18px !important;
  color: #b35c00 !important;
  padding: 6px 0 6px 14px !important;
  margin: 36px 0 16px !important;
  border-left: 3px solid #f4a84b !important;
}

/* ========================================
   悩みチェックリスト
   ======================================== */
.list-2 {
  list-style-type: none !important;
  padding: 1em !important;
  border: 1px solid #ee7700 !important;
  margin: 0 !important;
}
 
.list-2 li {
  display: flex !important;
  align-items: center !important;
  gap: 0 10px !important;
  position: relative !important;
  padding: .5em .5em .5em 2em !important;
  line-height: 1.5 !important;
}
 
.list-2 li::before,
.list-2 li::after {
  position: absolute !important;
  content: '' !important;
}
 
.list-2 li::before {
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1.2em !important;
  height: 1.2em !important;
  border-radius: 50% !important;
  background-color: #ee7700 !important;
}
 
.list-2 li::after {
  left: 0.45em !important;
  top: 50% !important;
  transform: translateY(-60%) rotate(45deg) !important;
  width: 0.3em !important;
  height: 0.55em !important;
  border-bottom: 2px solid #fff !important;
  border-right: 2px solid #fff !important;
}