/*
Theme Name: healing-theme
Description: ヒーリング.jp 専用カスタムテーマ。除霊.com（jorei-theme）の姉妹テーマとして、白・ラベンダー・ゴールドの柔らかいトーンで構成。
Author: 景岳
Version: 1.1.4
Text Domain: healing-theme
*/

/* ==========================================================================
   デザイントークン
   ========================================================================== */
:root{
  /* ベースカラー */
  --color-bg: #FFFFFF;
  --color-bg-soft: #FAF8FD;      /* ごく薄いラベンダーの背景 */
  --color-bg-softer: #F3EFFA;    /* セクション区切り用 */

  /* アクセントカラー */
  --color-lavender: #B9A6E0;
  --color-lavender-deep: #9B82C9;
  --color-lavender-pale: #E7DFF6;

  /* 除霊.comと統一するゴールド */
  --color-gold: #C9A96E;
  --color-gold-soft: #E4D3B0;

  /* テキスト */
  --color-text: #3A3540;
  --color-text-soft: #746E7E;
  --color-text-faint: #A79FB3;
  --color-white: #FFFFFF;

  /* ライン・シャドウ */
  --color-border: #ECE6F6;
  --shadow-soft: 0 10px 30px rgba(155, 130, 201, 0.12);
  --shadow-card: 0 4px 16px rgba(155, 130, 201, 0.10);

  /* フォント */
  --font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  --font-heading: "Shippori Mincho", "Noto Serif JP", serif;

  /* 角丸・余白の基準 */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --container-width: 1120px;
}

/* ==========================================================================
   リセット / ベース
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; transition: opacity .2s ease, color .2s ease; }
a:hover{ opacity: .75; }
ul{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4{
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 .6em;
  color: var(--color-text);
}
p{ margin: 0 0 1em; }
.container{
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}
.visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   共通パーツ
   ========================================================================== */
.section{ padding: 88px 0; }
.section--soft{ background: var(--color-bg-soft); }
.section-heading{
  text-align: center;
  margin-bottom: 48px;
}
.section-heading .eyebrow{
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--color-lavender-deep);
  margin-bottom: 12px;
}
.section-heading h2{
  font-size: 30px;
}
.section-heading p{
  color: var(--color-text-soft);
  font-size: 15px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--primary{
  background: linear-gradient(135deg, var(--color-lavender) 0%, var(--color-lavender-deep) 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-soft);
}
.btn--gold{
  background: var(--color-gold);
  color: var(--color-white);
}
.btn--outline{
  background: transparent;
  border-color: var(--color-lavender);
  color: var(--color-lavender-deep);
}

.card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}
.card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.card__media{
  aspect-ratio: 4 / 3;
  background: var(--color-lavender-pale);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-lavender-deep);
  font-size: 13px;
}
.card__body{ padding: 20px; }
.card__tag{
  display: inline-block;
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--color-lavender-deep);
  background: var(--color-lavender-pale);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.card__title{ font-size: 18px; margin-bottom: 6px; }
.card__meta{ font-size: 13px; color: var(--color-text-soft); }

.breadcrumb{
  font-size: 13px;
  color: var(--color-text-faint);
  margin-bottom: 28px;
}
.breadcrumb a{ color: var(--color-lavender-deep); }

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.site-logo{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-text);
}
.site-logo__mark{ width: 34px; height: 34px; flex-shrink: 0; }
.primary-nav ul{
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}
.primary-nav a{ color: var(--color-text-soft); }
.primary-nav a:hover{ color: var(--color-lavender-deep); }
.header-cta{ display: flex; align-items: center; gap: 12px; }
.nav-toggle{ display: none; }

@media (max-width: 880px){
  .primary-nav{ display: none; }
  .nav-toggle{ display: inline-flex; }
}

/* ==========================================================================
   ヒーローセクション
   ========================================================================== */
.hero{
  position: relative;
  padding: 120px 0 100px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 50% 0%, var(--color-lavender-pale) 0%, rgba(255,255,255,0) 70%),
    var(--color-white);
}
.hero__glow{
  position: absolute;
  top: -120px; left: 50%; transform: translateX(-50%);
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,110,.18) 0%, rgba(185,166,224,.14) 45%, rgba(255,255,255,0) 75%);
  filter: blur(4px);
  pointer-events: none;
}
.hero__eyebrow{
  display: inline-block;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--color-gold);
  margin-bottom: 20px;
}
.hero h1{
  position: relative;
  font-size: 44px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.hero h1 .accent{ color: var(--color-lavender-deep); }
.hero p.lead{
  position: relative;
  max-width: 560px;
  margin: 0 auto 36px;
  color: var(--color-text-soft);
}
.hero__actions{
  position: relative;
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}

@media (max-width: 640px){
  .hero{ padding: 88px 0 64px; }
  .hero h1{ font-size: 30px; }
}

/* ==========================================================================
   カテゴリナビ（トップの導線カード）
   ========================================================================== */
.category-nav{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.category-nav__item{
  display: block;
  padding: 28px 20px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.category-nav__item:hover{ opacity: 1; border-color: var(--color-lavender); transform: translateY(-3px); }
.category-nav__label{ font-size: 15px; font-weight: 600; }

/* ==========================================================================
   エリア一覧（都道府県・地方）
   ========================================================================== */
.area-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.area-grid a{
  display: block;
  padding: 18px 12px;
  text-align: center;
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.area-grid a:hover{ background: var(--color-lavender-pale); opacity: 1; }

/* ==========================================================================
   フッター
   ========================================================================== */
.site-footer{
  background: var(--color-bg-softer);
  padding: 64px 0 32px;
  margin-top: 80px;
  font-size: 13px;
  color: var(--color-text-soft);
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}
.footer-grid h4{ font-size: 14px; margin-bottom: 14px; color: var(--color-text); }
.footer-grid li{ margin-bottom: 8px; }
.footer-logo{ display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 18px; color: var(--color-text); margin-bottom: 12px; }
.footer-bottom{
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.footer-bottom__links{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-bottom__links a{ color: var(--color-text-soft); }
.footer-bottom__links a:hover{ color: var(--color-lavender-deep); }
.footer-bottom__sister{ color: var(--color-text-faint); }

@media (max-width: 720px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   記事 / シングルページ
   ========================================================================== */
.entry-header{ text-align: center; margin-bottom: 40px; }
.entry-header h1{ font-size: 30px; }
.entry-meta{ font-size: 13px; color: var(--color-text-faint); }
.entry-content{ max-width: 760px; margin: 0 auto; font-size: 16px; }
.entry-content h2{ font-size: 22px; margin-top: 2em; }
.entry-content h3{ font-size: 18px; margin-top: 1.6em; }
.entry-content img{ border-radius: var(--radius-md); }

/* プロフィール（ヒーラー／サロン詳細） */
.profile-header{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 40px;
}
.profile-header__photo{
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--color-lavender-pale);
}
.profile-header__meta{ display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.profile-header__meta span{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
}

@media (max-width: 640px){
  .profile-header{ grid-template-columns: 1fr; }
  .profile-header__photo{ width: 120px; }
}

/* 料金表 */
.price-table{ width: 100%; border-collapse: collapse; margin: 24px 0; }
.price-table th, .price-table td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: 14px;
}
.price-table th{ background: var(--color-bg-soft); font-weight: 600; }

/* ==========================================================================
   お問い合わせ種別カード
   ========================================================================== */
.contact-type-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 32px 0 40px;
}
.contact-type-card{
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.contact-type-title{ font-weight: 600; margin-bottom: 6px; }
.contact-type-desc{ font-size: 13px; color: var(--color-text-soft); }

/* ==========================================================================
   お問い合わせフォーム
   ========================================================================== */
.contact-form{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 32px;
}
.form-field{ margin-bottom: 20px; }
.form-field label{ display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.form-required{ color: #C0607A; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-white);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline: none;
  border-color: var(--color-lavender);
}
.form-hint{ font-size: 12px; color: var(--color-text-faint); margin: 6px 0 0; }
.form-field-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-agree{ margin: 4px 0 24px; }
.form-agree label{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.form-agree input[type="checkbox"]{
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-lavender-deep);
}
.form-agree a{
  color: var(--color-lavender-deep);
  text-decoration: underline;
}
.form-agree a:hover{ opacity: .75; }
.contact-form .btn{ border: none; }

.form-notice{
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 24px;
}
.form-notice--success{ background: #E9F4EC; color: #2F6B45; }
.form-notice--error{ background: #FBEAEE; color: #A13B52; }

.contact-notes{
  font-size: 13px;
  color: var(--color-text-soft);
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}
.contact-notes h4{ font-size: 14px; margin-bottom: 12px; }
.contact-notes li{ margin-bottom: 8px; padding-left: 1.2em; position: relative; }
.contact-notes li::before{ content: "・"; position: absolute; left: 0; }

/* ==========================================================================
   よくある質問（アコーディオン）
   ========================================================================== */
.faq-list{ max-width: 760px; margin: 0 auto; }
.faq-item{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px 24px;
  margin-bottom: 14px;
}
.faq-question{
  cursor: pointer;
  list-style: none;
  padding: 18px 32px 18px 0;
  font-weight: 600;
  font-size: 15px;
  position: relative;
}
.faq-question::-webkit-details-marker{ display: none; }
.faq-question::after{
  content: "+";
  position: absolute;
  right: 4px; top: 16px;
  font-size: 20px;
  color: var(--color-lavender-deep);
}
.faq-item[open] .faq-question::after{ content: "−"; }
.faq-answer{
  padding: 0 0 20px;
  font-size: 14px;
  color: var(--color-text-soft);
}
.faq-answer p:last-child{ margin-bottom: 0; }

/* ページネーション */
.pagination{ display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination a, .pagination span{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 13px;
  border: 1px solid var(--color-border);
}
.pagination .current{ background: var(--color-lavender); color: var(--color-white); border-color: var(--color-lavender); }

/* ==========================================================================
   料金案内ページ
   ========================================================================== */
.price-section-title{ font-size: 22px; margin: 64px 0 8px; }
.price-section-lead{ color: var(--color-text-soft); font-size: 14px; margin-bottom: 24px; }

/* 料金相場サマリーカード */
.price-summary-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin: 8px 0 48px;
}
.price-summary-card{
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
}
.price-summary-card__label{
  font-size: 13px;
  color: var(--color-lavender-deep);
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.price-summary-card__price{
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--color-text);
  margin-bottom: 4px;
}
.price-summary-card__unit{
  font-size: 12px;
  color: var(--color-text-faint);
  margin-bottom: 10px;
}
.price-summary-card__desc{ font-size: 13px; color: var(--color-text-soft); margin: 0; }

/* 料金を見極める番号付きリスト */
.point-list{ max-width: 760px; margin: 0 auto; counter-reset: point; }
.point-list li{
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}
.point-list li:last-child{ border-bottom: none; }
.point-list li::before{
  counter-increment: point;
  content: counter(point);
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-lavender) 0%, var(--color-lavender-deep) 100%);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
}
.point-list h4{ font-size: 15px; margin: 0 0 4px; }
.point-list p{ font-size: 13px; color: var(--color-text-soft); margin: 0; }

/* 料金に関する注意ボックス */
.price-notice{
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin: 0 auto;
  max-width: 760px;
}
.price-notice h3{ font-size: 17px; margin-bottom: 14px; }
.price-notice ul{ margin-bottom: 16px; }
.price-notice li{ font-size: 14px; color: var(--color-text-soft); margin-bottom: 8px; padding-left: 1.3em; position: relative; }
.price-notice li::before{ content: "・"; position: absolute; left: 0; color: var(--color-gold); }
.price-notice p{ font-size: 14px; margin-bottom: 0; }
.price-notice a{ color: var(--color-lavender-deep); text-decoration: underline; }

.price-cta{ text-align: center; margin-top: 56px; }
.price-cta p{ color: var(--color-text-soft); margin-bottom: 20px; }