/* ================================================================================
  components/consult-phone.css（visual）
  momo-consult-phone 共通コンポーネント：セクション丸ごと
  - デフォルト色はここで持つ
  - ページ差分は bodyスコープで CSS変数上書き
================================================================================ */

.momo-consult-phone{
  /* ✅ 上書き可能な変数（デフォルト値） */
  --consult-phone-number-color: #eb6e8f;
  --consult-phone-hours-color: #666;
  --consult-phone-label-color: #453336;

  background: #fff;
  padding: 60px 20px;
}

.momo-consult-phone-inner{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  background: #fef4f7;
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(235, 110, 143, 0.1);
}

.momo-consult-phone-label{
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 600;
  color: var(--consult-phone-label-color);
}

/* 電話番号（タイポは .c-consultation__phone と同じ） */
.momo-consult-phone .momo-phone-number{
  margin: 0 0 6px;
}

.momo-consult-phone .momo-phone-number a{
  font-size: 48px;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: 0.05em;

  color: var(--consult-phone-number-color);
  text-decoration: none;
  display: inline-block;
  transition: transform 0.3s;
}

.momo-consult-phone .momo-phone-number a:hover{
  transform: scale(1.05);
}

/* 営業時間（HTMLは momo-phone-hours / 旧互換 momo-consult-phone-time） */
.momo-phone-hours,
.momo-consult-phone-time{
  font-size: 16px;
  color: var(--consult-phone-hours-color);
  margin-bottom: 50px !important;
  /*margin: 20px 0;*/
}

/* ボタン */
.momo-consult-phone-buttons{
  margin: 30px 0 20px;
}

.momo-consult-contact-btn{
  display: inline-block;
  padding: 15px 40px;
  background: #eb6e8f;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: bold;
  transition: all 0.3s;
}

.momo-consult-contact-btn:hover{
  background: #ee85a1;
  transform: translateY(2px);
  box-shadow: 0 4px 15px rgba(235, 110, 143, 0.3);
  color: #fff;
}

/* ✅ SP（これは .c-consultation__phone のルール踏襲） */
@media (max-width: 768px){
  .momo-consult-phone .momo-phone-number a{
    font-size: calc(32px + 16 * (100vw - 320px)/ 448);
  }
  .momo-phone-hours,
  .momo-consult-phone-time{
    font-size: calc(14px + 2 * (100vw - 320px)/ 448);
  }
}

@media (max-width: 500px){
  .momo-consult-phone-inner{
    padding: 30px 20px;
  }
}

/* =========================================
   consult-phone : header variant
   - ヘッダー内では背景/余白を無害化
========================================= */
/* header内では共通コンポーネントの背景/余白だけ無害化（見た目一致は維持） */
.momo-consult-phone.momo-consult-phone--in-header{
  background: transparent;
  padding: 0;
  margin: 0;
}