/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 16 2025 | 03:08:30 */
/* メインCTA */
/* ===============================
   全体エリア
=============================== */
.p-mainCtaArea{
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* ===============================
   見出し
=============================== */
.p-mainCtaLead{
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.p-mainCtaLead .slash{
  color: #e60012;
  margin: 0 8px;
}

/* ===============================
   メインCTA（赤）
=============================== */
.p-mainCta{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 24px 72px;
  background: #e60012;
  border-radius: 999px;
  text-decoration: none;
  margin: 0 auto 16px;
}

/* hover 白マスク（25%） */
.p-mainCta::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.25);
  opacity: 0;
  transition: opacity .2s ease;
}
.p-mainCta:hover::after{
  opacity: 1;
}

/* バッジ（PCは横長ピル） */
.p-mainCta__badge{
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  color: #e60012;
  font-size: 16px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
}
.p-mainCta__badgeTop,
.p-mainCta__badgeMain{
  display: inline;
}

/* テキスト */
.p-mainCta__textMain{
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  z-index: 2;
}

/* 右矢印（白丸） */
.p-mainCta__arrow{
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.p-mainCta__arrow::before{
  content: "›";
  color: #e60012;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  transform: translate(1px,-2px);
  display: block;
}

/* ===============================
   注釈
=============================== */
.p-mainCtaNote{
  font-size: 12px;
  color: #555;
  text-align: center;
  margin-bottom: 24px;
}

/* ===============================
   「または」
=============================== */
.p-mainCtaOr{
  text-align: center;
  font-size: 14px;
  margin: 24px 0;
  position: relative;
}
.p-mainCtaOr::before,
.p-mainCtaOr::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #ddd;
}
.p-mainCtaOr::before{ left: 0; }
.p-mainCtaOr::after{ right: 0; }

/* ===============================
   サブCTAラッパー
=============================== */
.p-subCtaWrap{
  display: flex;
  gap: 24px;
  justify-content: space-between;
  max-width: 760px;
  margin: 0 auto;
}
.p-subCtaHarfWrap{
  display: flex;
  justify-content: space-between;
  max-width: 380px;
  margin: 0 auto;
}

/* ===============================
   サブCTA共通
=============================== */
.p-subCta{
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 64px;
  border-radius: 999px;
  text-decoration: none;
  min-height: 76px;
}

/* hover 白マスク（25%） */
.p-subCta::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.25);
  opacity: 0;
  transition: opacity .2s ease;
}
.p-subCta:hover::after{
  opacity: 1;
}

/* 左の無料（PCは正円） */
.p-subCta__badge{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}

/* テキスト中央（2行を安定） */
.p-subCta__text{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  z-index: 2;
  max-width: 72%;
  white-space: normal;
}

.p-subCta__textTop{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.p-subCta__textMain{
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: normal;
}

.p-subCta__textNote{
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

/* 右の丸アイコン（白丸＋＞） */
.p-subCta__arrow{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.p-subCta__arrow::before{
  content: "›";
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  transform: translate(1px,-2px);
  display: block;
}
/* ===============================
   チャンステスト（赤）
=============================== */
.p-subCta--chancetest{
  background: #e60012;
  height: 60px;
}
.p-subCta--chancetest .p-subCta__textTop,
.p-subCta--chancetest .p-subCta__textMain,
.p-subCta--chancetest .p-subCta__textNote{
  color: #fff;
}
.p-subCta--chancetest .p-subCta__badge{
  color: #e60012;
}
.p-subCta--chancetest .p-subCta__arrow::before{
  color: #e60012;
}


/* ===============================
   来店（緑）
=============================== */
.p-subCta--visit{
  background: #1f9e93;
}
.p-subCta--visit .p-subCta__textTop,
.p-subCta--visit .p-subCta__textMain,
.p-subCta--visit .p-subCta__textNote{
  color: #fff;
}
.p-subCta--visit .p-subCta__badge{
  color: #1f9e93;
}
.p-subCta--visit .p-subCta__arrow::before{
  color: #1f9e93;
}

/* ===============================
   オンライン（黄）
=============================== */
.p-subCta--online{
  background: #f3aa1b;
}
.p-subCta--online .p-subCta__textTop,
.p-subCta--online .p-subCta__textMain,
.p-subCta--online .p-subCta__textNote{
  color: #fff;
}
.p-subCta--online .p-subCta__badge{
  color: #f3aa1b;
}
.p-subCta--online .p-subCta__arrow::before{
  color: #f3aa1b;
}

/* ===============================
   電話予約（オレンジ）
=============================== */
.p-subCta--tel{
  background: #ee7800;
}
.p-subCta--tel .p-subCta__textTop,
.p-subCta--tel .p-subCta__textMain,
.p-subCta--tel .p-subCta__textNote{
  color: #fff;
}
.p-subCta--tel .p-subCta__badge{
  color: #ee7800;
}
.p-subCta--tel .p-subCta__arrow::before{
  color: #ee7800;
}

/* ===============================
   スマホ表示（今回の調整）
=============================== */
@media (max-width: 767px){

  /* 見出しを1行に固定（改行防止） */
  .p-mainCtaLead{
    font-size: 1.35rem;      /* ★少し小さく */
    white-space: nowrap;     /* ★改行しない */
  }

  /* 下段は縦 */
  .p-subCtaWrap{
    flex-direction: column;
    gap: 16px;
  }

  /* ===== 赤ボタン：丸を左へ＆上下左の余白をそろえる ===== */
  .p-mainCta{
    padding: 18px 56px 18px 68px;
    min-height: 74px;        /* ★上下のゆとり維持 */
  }

  .p-mainCta__badge{
    left: 10px;              /* ★もう少し左へ */
    width: 54px;             /* ★少しだけ縮めて上下余白を作る */
    height: 54px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: normal;
  }

  .p-mainCta__badgeTop{
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 2px;
  }
  .p-mainCta__badgeMain{
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.05;
  }

  .p-mainCta__textMain{
    font-size: 20px;
  }

  /* ===== 下段：無料楕円＆文字サイズ（現状維持） ===== */
  .p-subCta{
    width: 100%;
    padding: 14px 56px;
    min-height: 0;
  }

  .p-subCta__badge{
    left: 10px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    font-size: 12px;
  }

  .p-subCta__text{
    max-width: 82%;
    gap: 3px;
  }
  .p-subCta__textTop{
    font-size: 12px;
  }
  .p-subCta__textMain{
    font-size: 16px;
  }
  .p-subCta__textNote{
    font-size: 11px;
  }

  .p-subCta--tel .p-subCta__textMain{
    white-space: nowrap;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}



/* 2段CTA */
/* ===============================
   全体（PCは640固定）
=============================== */
.p-consultCtaArea{
  max-width: 640px;          /* ★760 → 640 */
  margin: 0 auto;
  padding: 24px 16px 32px;
}

/* ===============================
   見出し（太さ・サイズを調整）
=============================== */
.p-consultCtaLead{
  text-align: center;
  font-size: 1.6rem;        /* ★少し小さく */
  font-weight: 700;
  margin: 0 0 18px;
  letter-spacing: .01em;
}
.p-consultCtaLead .slash{
  color: #e60012;
  margin: 0 12px;
}

/* PC/SP切替 */
.p-consultCtaPc{ display: block; }
.p-consultCtaSp{ display: none; }

/* 「または」共通 */
.p-consultCtaOr{
  text-align: center;
  font-size: 15px;
  margin: 18px 0;
  position: relative;
  color: #444;
}
.p-consultCtaOr::before,
.p-consultCtaOr::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: #ddd;
}
.p-consultCtaOr::before{ left: 0; }
.p-consultCtaOr::after{ right: 0; }

/* ===============================
   PCボタン（縦に2本）
=============================== */
.p-consultCtaBtn{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 104px;         /* ★少し低く */
  border-radius: 999px;
  text-decoration: none;
  padding: 16px 72px;        /* ★左右少し詰める */
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

/* hover 白マスク 25% */
.p-consultCtaBtn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.25);
  opacity: 0;
  transition: opacity .2s ease;
}
.p-consultCtaBtn:hover::after{ opacity: 1; }

/* 左ラベル（白ピル） */
.p-consultCtaBtn__label{
  position: absolute;
  left: 22px;                /* ★少し内側 */
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.90);
  font-weight: 700;          /* ★800 → 700 */
  font-size: 16px;           /* ★少し小さく */
  line-height: 1.1;
  padding: 10px 16px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
}

/* 中央タイトル */
.p-consultCtaBtn__title{
  color: #fff;
  font-size: 28px;           /* ★30 → 28 */
  font-weight: 700;          /* ★900 → 700 */
  letter-spacing: .01em;
  z-index: 2;
}

/* 右の白丸矢印 */
.p-consultCtaBtn__arrow{
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.p-consultCtaBtn__arrow::before{
  content: "›";
  font-size: 26px;
  font-weight: 700;          /* ★900 → 700 */
  line-height: 1;
  transform: translate(1px,-2px);
  display: block;
}

/* 色 */
.p-consultCtaBtn--visit{ background: #1f9e93; }
.p-consultCtaBtn--visit .p-consultCtaBtn__label{ color: #0f524c; }
.p-consultCtaBtn--visit .p-consultCtaBtn__arrow::before{ color: #1f9e93; }

.p-consultCtaBtn--online{ background: #f3aa1b; }
.p-consultCtaBtn--online .p-consultCtaBtn__label{ color: #7a5200; }
.p-consultCtaBtn--online .p-consultCtaBtn__arrow::before{ color: #f3aa1b; }

/* ===============================
   SPボタン（前回寄せ）
=============================== */
.p-consultCtaBtnSp{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  text-decoration: none;
  padding: 14px 56px;
  min-height: 64px;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

/* hover 白マスク 25% */
.p-consultCtaBtnSp::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.25);
  opacity: 0;
  transition: opacity .2s ease;
}
.p-consultCtaBtnSp:hover::after{ opacity: 1; }

/* 左：無料（楕円） */
.p-consultCtaBtnSp__badge{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;          /* ★少し軽く */
  line-height: 1;
  z-index: 2;
}

/* 中央テキスト */
.p-consultCtaBtnSp__text{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3px;
  max-width: 82%;
  z-index: 2;
}
.p-consultCtaBtnSp__top{
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}
.p-consultCtaBtnSp__main{
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.p-consultCtaBtnSp__main--oneLine{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-consultCtaBtnSp__note{
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

/* 右：白丸矢印 */
.p-consultCtaBtnSp__arrow{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.p-consultCtaBtnSp__arrow::before{
  content: "›";
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  transform: translate(1px,-2px);
  display: block;
}

/* 色 */
.p-consultCtaBtnSp--visit{ background: #1f9e93; }
.p-consultCtaBtnSp--visit .p-consultCtaBtnSp__badge{ color: #1f9e93; }
.p-consultCtaBtnSp--visit .p-consultCtaBtnSp__arrow::before{ color: #1f9e93; }

.p-consultCtaBtnSp--tel{ background: #f08a00; }
.p-consultCtaBtnSp--tel .p-consultCtaBtnSp__badge{ color: #f08a00; }
.p-consultCtaBtnSp--tel .p-consultCtaBtnSp__arrow::before{ color: #f08a00; }

/* SP用「または」 */
.p-consultCtaOr--sp{
  margin: 14px 0;
}

/* ===============================
   レスポンシブ
=============================== */
@media (max-width: 767px){

  .p-consultCtaLead{
    font-size: 1.3rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .p-consultCtaLead .slash{
    margin: 0 10px;
  }

  .p-consultCtaPc{ display: none; }
  .p-consultCtaSp{ display: block; }

  .p-consultCtaOr::before,
  .p-consultCtaOr::after{
    width: 38%;
  }
}


/* オープラスCTA */
/* =========================================
   上部テキスト（＼ ／）※ラッパー不要で中央寄せ
========================================= */
.p-ctaTopText{
  display: table !important;
  margin: 0 auto 10px !important;

  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #4aa7c5;
  letter-spacing: -0.5px;

  position: relative;
  padding: 0 16px;
}

.p-ctaTopText::before{
  content:"＼";
  position:absolute;
  left:0;
  top:0;
}
.p-ctaTopText::after{
  content:"／";
  position:absolute;
  right:0;
  top:0;
}

/* ブロック側の余白が強い時の保険（上テキストの下余白だけ管理） */
.p-ctaTopText,
.p-ctaTopText *{
  margin-top: 0 !important;
}

/* =========================================
   下部テキスト（ボタンとの余白を約5pxに固定）
   ※ブロックの既定マージンを潰す
========================================= */
.p-ctaNoteText{
  text-align: center;
  font-size: 0.65rem!important;
  line-height: 1.7;
  color: #555;

  margin: 5px 0 0 !important;
}

/* 下部テキストが p / div どれでも効くように保険 */
.p-ctaNoteText,
.p-ctaNoteText *{
  margin-top: 0 !important;
}

/* =========================================
   ボタン直下の “余白の元” を潰す（ここが効く事が多い）
   ・wp-block-button / swell-block-button の下マージン対策
========================================= */
.p-ctaBtn,
.p-ctaBtn .wp-block-button,
.p-ctaBtn .swell-block-button{
  margin-bottom: 0 !important;
}

/* ボタンの直後に来る要素の上余白を5pxに寄せる（最終保険） */
.p-ctaBtn + *,
.p-ctaBtn + p,
.p-ctaBtn + div{
  margin-top: 5px !important;
}

/* =========================================
   SWELLボタン 共通（現状仕様は維持）
========================================= */
.p-ctaBtn .swell-block-button__link{
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 76px;
  border-radius: 10px;

  padding: 0 66px 0 96px;

  color: #fff;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;

  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  overflow: hidden;
  margin-bottom: 0 !important;

  white-space: normal;
  word-break: keep-all;

  font-size: clamp(16px, 1.25vw + 12px, 20px);

  /* ホバー用：なめらかに */
  transition: box-shadow .18s ease;
}

/* 無料バッジ */
.p-ctaBtn .swell-block-button__link::before{
  content: "無料";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);

  width: 48px;
  height: 48px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  color: var(--cta-accent, #e8569b);
  font-size: 12px;
  font-weight: 700;
}

/* 右端 アイコン風「＞」 */
.p-ctaBtn .swell-block-button__link::after{
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);

  width: 12px;
  height: 12px;
  border-top: 3px solid rgba(255,255,255,.95);
  border-right: 3px solid rgba(255,255,255,.95);
}

/* 個別調整 */
.p-ctaBtn--pink .swell-block-button__link{
  font-size: 99%;
}

.p-ctaBtn--green .swell-block-button__link{
  justify-content: flex-start;
  text-align: left;
  padding-left: 75px;
  font-size: 93%;
}

/* 色バリエーション */
.p-ctaBtn--pink .swell-block-button__link{ background:#e8569b; }
.p-ctaBtn--pink{ --cta-accent:#e8569b; }

.p-ctaBtn--green .swell-block-button__link{ background:#2fb3a6; }
.p-ctaBtn--green{ --cta-accent:#2fb3a6; }

.p-ctaBtn--purple .swell-block-button__link{ background:#5b64b1; }
.p-ctaBtn--purple{ --cta-accent:#5b64b1; }

/* =========================================
   ホバー演出（影ではなく、白いマスクで色がうすく見える）
   ※疑似要素を増やさず、inset の影でマスクを作る
========================================= */
.p-ctaBtn .swell-block-button__link:hover{
  /* もとの影 + 白マスク（内側） */
  box-shadow:
    0 6px 14px rgba(0,0,0,.12),
    inset 0 0 0 9999px rgba(255,255,255,.25);
}

/* キーボード操作でも同じ見え方 */
.p-ctaBtn .swell-block-button__link:focus-visible{
  box-shadow:
    0 6px 14px rgba(0,0,0,.12),
    inset 0 0 0 9999px rgba(255,255,255,.25);
  outline: none;
}