@charset "UTF-8";
/* ==========================================================================
   リッチ化レイヤー（指示書㉜）／全ページ共通
   --------------------------------------------------------------------------
   ・既存のCSSは一切変更していない。このファイルだけで上書きしている
   ・各PHPファイル内の <style> より後に適用させるため、
     すべてのセレクタを「body 」で始めている。絶対に外さないこと
   ・元に戻したいときは functions.php の読み込み1ブロックを消すか、
     このファイルを空にすればよい
   ========================================================================== */

:root {
  /* 影は2枚重ね。1枚目＝接地、2枚目＝空気。色は必ずピンク寄りにする（灰色は使わない） */
  --rich-sh: 0 1px 2px rgba(169, 47, 85, .14), 0 3px 8px rgba(169, 47, 85, .10);
  --rich-sh-card: 0 2px 4px rgba(169, 47, 85, .08), 0 14px 32px rgba(169, 47, 85, .12);
  --rich-gloss: inset 0 1px 0 #ffffff;
  --rich-hair: inset 0 0 0 1px rgba(250, 215, 226, .9);
}

/* ==========================================================================
   1. ボタン共通（艶の面を作るための土台）
   ========================================================================== */
body .bd-back-btn,
body .grt-back-btn,
body .nwd-back-btn,
body .sch-btn-primary,
body .rct-btn-tel,
body .qa-btn-tel,
body .flw-btn-line,
body .qa-btn-line,
body .rct-btn-line,
body .sch-btn-line,
body .header-btn-line,
body .header-btn-cast,
body .flw-btn-tel,
body .sch-btn-outline,
body .tc-filter-btn,
body .tc-page-btn,
body .flw-plans-more a {
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

body .bd-back-btn::after,
body .grt-back-btn::after,
body .nwd-back-btn::after,
body .sch-btn-primary::after,
body .rct-btn-tel::after,
body .qa-btn-tel::after,
body .flw-btn-line::after,
body .qa-btn-line::after,
body .rct-btn-line::after,
body .sch-btn-line::after,
body .header-btn-cast::after,
body .header-btn-line::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 4px;
  height: 32%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* ==========================================================================
   2. ピンクの塗りボタン
   ========================================================================== */
body .bd-back-btn,
body .grt-back-btn,
body .nwd-back-btn,
body .sch-btn-primary,
body .rct-btn-tel,
body .header-btn-cast {
  background: linear-gradient(180deg, #E55179 0%, #CE2F5A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(130, 16, 52, .22),
    0 1px 2px rgba(169, 47, 85, .20),
    0 8px 22px rgba(169, 47, 85, .22);
  text-shadow: 0 1px 1px rgba(130, 16, 52, .20);
}

body .bd-back-btn:hover,
body .grt-back-btn:hover,
body .nwd-back-btn:hover,
body .sch-btn-primary:hover,
body .rct-btn-tel:hover,
body .header-btn-cast:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #E85A80 0%, #D23461 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(130, 16, 52, .22),
    0 2px 4px rgba(169, 47, 85, .20),
    0 16px 34px rgba(169, 47, 85, .26);
}

body .bd-back-btn:active,
body .grt-back-btn:active,
body .nwd-back-btn:active,
body .sch-btn-primary:active,
body .rct-btn-tel:active,
body .header-btn-cast:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(130, 16, 52, .30),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    0 1px 2px rgba(169, 47, 85, .18);
}

/* ==========================================================================
   3. LINEの緑ボタン（--color-line はLINEの指定色なので値を変えないこと）
   ========================================================================== */
body .flw-btn-line,
body .qa-btn-line,
body .rct-btn-line,
body .sch-btn-line,
body .header-btn-line,
body .side-btn-line {
  background: linear-gradient(180deg, #1FD068 0%, #049C41 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(2, 80, 33, .28),
    0 1px 2px rgba(4, 120, 60, .24),
    0 8px 22px rgba(4, 120, 60, .26);
  text-shadow: 0 1px 1px rgba(2, 80, 33, .26);
}

body .flw-btn-line:hover,
body .qa-btn-line:hover,
body .rct-btn-line:hover,
body .sch-btn-line:hover,
body .header-btn-line:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #27D872 0%, #06A948 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(2, 80, 33, .28),
    0 2px 4px rgba(4, 120, 60, .24),
    0 16px 34px rgba(4, 120, 60, .30);
}

body .flw-btn-line:active,
body .qa-btn-line:active,
body .rct-btn-line:active,
body .sch-btn-line:active,
body .header-btn-line:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(2, 80, 33, .32),
    inset 0 -1px 0 rgba(255, 255, 255, .14),
    0 1px 2px rgba(4, 120, 60, .20);
}

/* ==========================================================================
   4. 濃色ボタン（よくある質問の電話ボタン）
   ========================================================================== */
body .qa-btn-tel {
  background: linear-gradient(180deg, #6B5560 0%, #4A3340 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -1px 0 rgba(28, 16, 23, .34),
    0 1px 2px rgba(74, 51, 64, .26),
    0 8px 22px rgba(74, 51, 64, .26);
  text-shadow: 0 1px 1px rgba(28, 16, 23, .28);
}

body .qa-btn-tel:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #7A6370 0%, #553B49 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(28, 16, 23, .34),
    0 2px 4px rgba(74, 51, 64, .26),
    0 16px 34px rgba(74, 51, 64, .30);
}

body .qa-btn-tel:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(28, 16, 23, .38),
    inset 0 -1px 0 rgba(255, 255, 255, .12),
    0 1px 2px rgba(74, 51, 64, .22);
}

/* ==========================================================================
   5. 白いボタン
   文字色は各ページの指定（!important を含む）をそのまま尊重し、触らない
   ========================================================================== */
body .flw-btn-tel,
body .sch-btn-outline,
body .tc-filter-btn,
body .tc-page-btn,
body .flw-plans-more a {
  background: linear-gradient(180deg, #ffffff 0%, #FFF6F9 100%);
  border-color: rgba(232, 170, 191, .85);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(169, 47, 85, .10),
    0 7px 18px rgba(169, 47, 85, .12);
}

body .flw-btn-tel:hover,
body .sch-btn-outline:hover,
body .tc-filter-btn:hover,
body .tc-page-btn:hover,
body .flw-plans-more a:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #ffffff 0%, #FFF0F5 100%);
  border-color: rgba(201, 43, 87, .55);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 4px rgba(169, 47, 85, .10),
    0 14px 30px rgba(169, 47, 85, .16);
}

body .flw-btn-tel:active,
body .sch-btn-outline:active,
body .tc-filter-btn:active,
body .tc-page-btn:active,
body .flw-plans-more a:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(169, 47, 85, .16),
    0 1px 2px rgba(169, 47, 85, .10);
}

/* ==========================================================================
   6. 上に戻るボタン
   枠線は視認性のために残す（指示書⑳で決めた仕様）
   ========================================================================== */
body .page-top-btn {
  background: linear-gradient(180deg, #ffffff 0%, #FFF4F8 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 5px rgba(169, 47, 85, .16),
    0 10px 24px rgba(169, 47, 85, .20);
}

body .page-top-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #FFEDF3 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 7px rgba(169, 47, 85, .18),
    0 14px 30px rgba(169, 47, 85, .26);
}

/* ==========================================================================
   7. 白いカード・ボックス
   ========================================================================== */
body .bd-related-card,
body .cpn-card,
body .flw-item,
body .flw-plan,
body .grt-content-box,
body .nwd-content-box,
body .qa-item,
body .rct-message-card,
body .rct-staff-card,
body .sch-cast-card,
body .tc-blog-card {
  background: linear-gradient(180deg, #ffffff 0%, #FFFCFD 60%, #FFF8FA 100%);
  box-shadow: var(--rich-gloss), var(--rich-hair), var(--rich-sh-card);
}

/* 枠線を持つカードは、内側の線を足さず枠線の色だけピンクに寄せる（二重線を防ぐ） */
body .rct-merit-item,
body .bd-cast-box,
body .dc-post-item {
  background: linear-gradient(180deg, #ffffff 0%, #FFFCFD 100%);
  border-color: rgba(250, 215, 226, .95);
  box-shadow: var(--rich-gloss), var(--rich-sh);
}

/* ==========================================================================
   8. 地紋（body のクリーム地にだけ、ごく薄く敷く）
   各セクションの地色には触らないので、地色が白やピンクの箇所には出ない
   ========================================================================== */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='none' stroke='%23E1436E' stroke-opacity='.13' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M11 9.4c-2.6-1.9-4.2-3.2-4.2-4.8a2.1 2.1 0 0 1 4.2-1.1 2.1 2.1 0 0 1 4.2 1.1c0 1.6-1.6 2.9-4.2 4.8Z'/%3E%3Cpath d='M34 32.4c-2.6-1.9-4.2-3.2-4.2-4.8a2.1 2.1 0 0 1 4.2-1.1 2.1 2.1 0 0 1 4.2 1.1c0 1.6-1.6 2.9-4.2 4.8Z'/%3E%3C/g%3E%3Cg fill='%23E1436E' fill-opacity='.13'%3E%3Ccircle cx='33' cy='9' r='1.5'/%3E%3Ccircle cx='10' cy='32' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 46px 46px;
}

/* ==========================================================================
   9. 灰色・黒の影を使っている箇所をピンク寄りに置き換える
   「AIっぽさ・安っぽさ」の最大の原因がこれ
   ========================================================================== */
body .header-btn:hover {
  box-shadow: 0 6px 16px rgba(169, 47, 85, .22);
}

body .side-btn {
  box-shadow: -2px 2px 12px rgba(169, 47, 85, .22);
}

/* ==========================================================================
   10. スマホ
   ========================================================================== */
@media screen and (max-width: 768px) {
  body {
    background-size: 38px 38px;
  }
}

/* ==========================================================================
   11. 取りこぼしたボタン・リンク（指示書㉝）
   「口コミをすべて見る」と同じ、白地＋艶の見え方に揃える
   ========================================================================== */
body .flw-link,
body .sys-flow-more a,
body .bd-cast-link,
body .rvd-nav-list a,
body .btn-cta.outline,
body .rct-tag,
body .post-tags a {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #FFF6F9 100%);
  border-color: rgba(232, 170, 191, .85);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(169, 47, 85, .10),
    0 7px 18px rgba(169, 47, 85, .12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

body .flw-link:hover,
body .sys-flow-more a:hover,
body .bd-cast-link:hover,
body .rvd-nav-list a:hover,
body .btn-cta.outline:hover,
body .post-tags a:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #ffffff 0%, #FFF0F5 100%);
  border-color: rgba(201, 43, 87, .55);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 4px rgba(169, 47, 85, .10),
    0 14px 30px rgba(169, 47, 85, .16);
}

body .flw-link:active,
body .sys-flow-more a:active,
body .bd-cast-link:active,
body .rvd-nav-list a:active,
body .btn-cta.outline:active,
body .post-tags a:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(169, 47, 85, .16),
    0 1px 2px rgba(169, 47, 85, .10);
}

/* 枠線が無い（または色が灰色の）ものに、ピンクの細枠を足す */
body .sys-flow-more a,
body .rvd-nav-list a,
body .post-tags a {
  border: 2px solid rgba(232, 170, 191, .85);
}

body .rvd-nav-list a,
body .post-tags a {
  border-width: 1px;
}

/* 灰色の文字色だけ、読みやすいピンク寄りに寄せる（#999 は薄すぎる） */
body .rvd-nav-list a {
  color: var(--color-secondary);
}

/* ==========================================================================
   12. カード型のナビゲーション
   ========================================================================== */
body .nwd-nav-link,
body .post-navigation {
  background: linear-gradient(180deg, #ffffff 0%, #FFFCFD 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 0 0 1px rgba(250, 215, 226, .9),
    0 2px 4px rgba(169, 47, 85, .08),
    0 14px 32px rgba(169, 47, 85, .12);
}

body .nwd-nav-link:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 0 0 1px rgba(226, 150, 174, .9),
    0 3px 6px rgba(169, 47, 85, .10),
    0 20px 40px rgba(169, 47, 85, .16);
}

/* ==========================================================================
   13. パレットから外れた色の統一
   下記は旧デザインの名残で、サイトのピンク＋クリームから外れている
     ・#c9a868（金）  … パートナープロフィール等の主ボタン
     ・#FF4493（原色ピンク）… 404ページ
     ・#389A6E（緑）  … 404ページ・ブログの前後記事リンク
   LINEの緑（#06C755）は公式色なので対象外。別途 緑の艶を当てる
   ========================================================================== */
body .btn-cta.primary,
body .btn-home,
body .btn-cast,
body .post-navigation a {
  position: relative;
  background: linear-gradient(180deg, #E55179 0%, #CE2F5A 100%);
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(130, 16, 52, .22),
    0 1px 2px rgba(169, 47, 85, .20),
    0 8px 22px rgba(169, 47, 85, .22);
  text-shadow: 0 1px 1px rgba(130, 16, 52, .20);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

body .btn-cta.primary:hover,
body .btn-home:hover,
body .btn-cast:hover,
body .post-navigation a:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #E85A80 0%, #D23461 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(130, 16, 52, .22),
    0 2px 4px rgba(169, 47, 85, .20),
    0 16px 34px rgba(169, 47, 85, .26);
}

body .btn-cta.primary:active,
body .btn-home:active,
body .btn-cast:active,
body .post-navigation a:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(130, 16, 52, .30),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    0 1px 2px rgba(169, 47, 85, .18);
}

/* ==========================================================================
   14. LINEの緑（プロフィールページのLINE相談ボタン）
   ========================================================================== */
body .btn-cta.secondary {
  position: relative;
  background: linear-gradient(180deg, #1FD068 0%, #049C41 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(2, 80, 33, .28),
    0 1px 2px rgba(4, 120, 60, .24),
    0 8px 22px rgba(4, 120, 60, .26);
  text-shadow: 0 1px 1px rgba(2, 80, 33, .26);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

body .btn-cta.secondary:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #27D872 0%, #06A948 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(2, 80, 33, .28),
    0 2px 4px rgba(4, 120, 60, .24),
    0 16px 34px rgba(4, 120, 60, .30);
}

body .btn-cta.secondary:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(2, 80, 33, .32),
    inset 0 -1px 0 rgba(255, 255, 255, .14),
    0 1px 2px rgba(4, 120, 60, .20);
}

/* ==========================================================================
   15. 艶の面（11〜14で追加したボタンに、上部の薄い光を乗せる）
   ========================================================================== */
body .flw-link::after,
body .sys-flow-more a::after,
body .btn-cta.primary::after,
body .btn-cta.secondary::after,
body .btn-cta.outline::after,
body .btn-home::after,
body .btn-cast::after,
body .post-navigation a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 4px;
  height: 32%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0));
  pointer-events: none;
}

body .flw-link::after,
body .sys-flow-more a::after,
body .btn-cta.outline::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
}
/* ========== 指示書㉝ ここまで ========== */