@charset "utf-8";
/* =========================================================
   Clone adaptations
   元サイトは UA で PC版(multipress)/スマホ版(smartpress) を
   出し分けていた。静的クローンでは @media 幅で出し分けるため、
   各ブレークポイントで不要なチロームを隠す + 微修正。
   （元CSSは無改変。差分はこのファイルに集約）
   ========================================================= */

/* --- PC (>=769px) : スマホ専用要素を隠す --- */
@media screen and (min-width:769px){
  #float_header,
  #Side_wrap,
  .main_teaser_area,
  .main_teaser_area_not_margin,
  #naka_page_title,
  #video_teaser_sp,
  #scroll_footer { display:none !important; }
}

/* --- SP (<=768px) : PC専用要素を隠す --- */
@media screen and (max-width:768px){
  #branding_box,
  #video_teaser,
  #main_teaser { display:none !important; }
}

/* --- PC/SP 出し分け用の汎用ヘルパー ---
   バナー等、元サイトが PC版とスマホ版で別マークアップ(別画像)の箇所に使う。
   .only-pc は PC幅でのみ表示 / .only-sp はスマホ幅でのみ表示 */
@media screen and (min-width:769px){ .only-sp { display:none !important; } }
@media screen and (max-width:768px){ .only-pc { display:none !important; } }

/* --- 全体背景を白に確定 ---
   元サイトは files_pc.css の `html{background:none #fff}` で白にする意図だが、
   当ビルドの連結では theme 側 `html{background:url(html_bg.jpg) … transparent}` に負けて
   html が透明になり、コンテンツの無い領域が（ブラウザ既定に依存して）黒く見える。
   最後に読むこのファイルで白を確定し、参考サイトと同じ白背景にする。 */
html { background: #fff; }
/* body も白を明示（元は transparent で html の白が透ける＝見た目同じ）。
   元CSSに body#page_6{background:none…}（id指定で高詳細度）があるため !important で確定。
   各セクションの背景画像は子要素側にあるため影響なし。 */
body { background-color: #fff !important; }

/* ハンバーガー展開中は背面スクロールを止める */
html.scroll-prevent,
html.scroll-prevent body { overflow:hidden; height:100%; }

/* --- SP : 横はみ出し(右の余白)を防ぐ安全網 --- */
@media screen and (max-width:768px){
  html, body, #wrapper { overflow-x:hidden; max-width:100%; }
  img { max-width:100%; height:auto; }
}

/* --- SP : PC版だけの要素を確実に隠す（元スマホ版に無いもの） --- */
@media screen and (max-width:768px){
  /* PC用JS(footer_pc.js)が差し込む英語見出し/デザインブロックは
     スマホ版には存在しない。幅をまたいで読み込まれても出ないように非表示 */
  .design_block { display:none !important; }

  /* フッター：元スマホ版はコピーライトのみ。
     PC版のサイトマップ/住所/SNS/Back to top(=#footer_box内)を隠す */
  #footer_box { display:none !important; }

  /* コピーライト：元スマホ版は #foot #copy で中央寄せ。当クローンはPC構造で
     左寄せ・画面端に張り付くため、中央寄せ＋左右余白で元サイトに合わせる */
  #copyright {
    text-align:center;
    box-sizing:border-box;
    padding:12px 5%;
  }

  /* NEWSサムネイル：元スマホ版 .img_thumb と同じく小さく右寄せ
     （PC用 .blog_thumb にはスマホ版CSSのサイズ指定が無く巨大化するため） */
  #mcjm4i1sgutqg0x0egdd .blog_thumb {
    float:right;
    width:20%;
    margin:0 0 10px 4%;
  }
  #mcjm4i1sgutqg0x0egdd .blog_thumb img { width:100%; height:auto; }
}

/* --- SP : ヘッダーのタイトルロゴ枠の高さを確定（横ロゴが上下で切れる対策） ---
   元CSSの高さ指定 `#h1_teaser_image h1 a img{height:calc(100vw*80/640)}` は
   当クローンのDOM（#h1_teaser_image > p > a > img、h1要素なし）に当たらず不発。
   枠が中身(1pxスペーサ画像)まで潰れ、背景の横ロゴ(8:1)が上部だけ見えて
   下が切れていた（ユーザー指摘「ヘッダーの文字が途切れる」）。
   元サイトの意図どおり枠高さ＝画像比率(160/1280=80/640=12.5%)に固定し、
   背景ロゴ全体が収まるようにする。背景は `100% auto` なので枠にぴったり収まる。 */
@media screen and (max-width:768px){
  #h1_teaser_image{ height:12.5vw; }
  #h1_teaser_image p{ margin:0; }
}

/* --- SP : 左右の余白（元smartpressは各<section>に左右5%paddingを付与） ---
   元サイトは #main > #outer_block > section に padding:0 5% を当て、
   コンテンツを画面端から内側に寄せている（全幅のギャラリー等は除外）。
   当クローンはPC版DOM構造のため、#content直下の各ブロックに同等のpaddingを付与。
   背景画像はブロックdivに直接指定(border-box)なので、paddingを足しても
   背景は全幅のまま・テキスト等の中身だけが5%内側に入る＝元サイトと同じ挙動。 */
@media screen and (max-width:768px){
  #content > div.easys_content:not(.np_04):not(.device_width):not(.c_07):not(.c_08):not(.c_09):not(.z_j6){
    box-sizing:border-box;
    padding-left:5%;
    padding-right:5%;
  }
}

/* --- SP : SNSバナー(#df4c)の3列を全ブラウザで確実に横並びに（iOS Safari対策） ---
   元smartpressは .column_3 (display:inline-block; width:32%) + float_left/right で3列に並べる。
   ところが iOS Safari(WebKit)では float+inline-block+%幅のサブピクセル丸めで列が落ち、
   各バナーが全幅化→縦積みになることがある（Chrome/Blinkでは再現しない）。ユーザーの
   iPhone14Pro(393px)実機で「HOTPEPPER Beautyが全幅＋下が空白」になったのがこれ。
   → flex で確実に3等分する。見た目（HPB/Instagram/LINE の3バナー横並び）は元サイトと同一。 */
@media screen and (max-width:768px){
  #df4cqjklib0x3yc5k5sy .content_area.only-sp .img_display{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }
  #df4cqjklib0x3yc5k5sy .content_area.only-sp .column_3{
    float:none !important;
    width:32% !important;
    margin:0 !important;
    flex:0 0 32%;
  }
  /* clear_float は flex では4つ目のアイテムになり配置を乱すため隠す（floatは既に未使用） */
  #df4cqjklib0x3yc5k5sy .content_area.only-sp .img_display > .clear_float{ display:none; }
}

/* --- SP : Google Map等の埋め込みiframeを画面幅に収める（info.html地図） ---
   元smartpressは `.nf_0X .html_area iframe{width:100%;height:350px}` で地図を全幅化していた。
   当クローンはPC DOM（地図は `.html_post.width_one_column` 内の width="600" 固定iframe）のため
   そのルールが当たらず、600px幅のまま画面右にはみ出す（html/bodyの overflow-x:hidden で
   横スクロールこそ出ないが、地図の右側が見切れる）。元SPと同じ width:100%/height:350px で収める。 */
@media screen and (max-width:768px){
  #content .html_post iframe,
  #content .html_area iframe { width:100%; height:350px; }
}

/* ===== LINE 再表示（2026-07-03）=====
   旧「LINE一時非表示（2026-06-24）」ブロックを削除し、LINEを復活。
   併せてトップSNSの大バナーは HotPepper→LINE に差替（index.html col1）。
   ＝フッターのLINEアイコン・SPサイドメニューのLINE・SNS大バナーのLINEが表示に戻る。 */

/* ===== LINE削除後の“空ブロック”整理（2026-07-01）=====
   LINE非表示で生じた残り（PC=SNSバナーのLINE枠＝上で非表示済 / SP=ナビバナー節の
   ピンク背景帯）を片付ける。ユーザー報告「LINEブロックの残骸（タン色の空ブロック）」対応。 */
@media screen and (max-width:768px){
  /* SP: ナビバナー節(#fczuk/#tx5)の banner_4_bg(ピンク) が上下paddingに帯として残る→透明化 */
  #fczukxuprqc6nmwq7e91,
  #tx5tntihw0p3eudwjbzy{ background-image:none !important; padding-top:calc(55/640*100vw) !important; padding-bottom:calc(55/640*100vw) !important; }
  /* SP: SNSバナーはLINE/Instagramの2枚なので中央寄せで間延びを解消 */
  #df4cqjklib0x3yc5k5sy .content_area.only-sp .img_display{ justify-content:center !important; gap:6% !important; }
  #df4cqjklib0x3yc5k5sy .content_area.only-sp .column_3{ width:40% !important; flex:0 0 40% !important; }
}

/* ===== info(アクセス) 地図 一時非表示（2026-06-24）=====
   テンプレ元の Google マップは大阪(R2 BUILDING)を指しており、サロン ド ジョワ(多治見)とは別の場所。
   オーナー方針「地図は載せない」に合わせ、元デザインは保ったまま“地図枠だけ”を隠す。
   ＝再掲載/差し替え時はこの【ブロックごと削除】し、info.html(_raw/info.html)の iframe の src を
   多治見の地図URLに変更 → build_pages.py で再生成すればOK。info(body#page_18)限定・地図専用ブロックのみ。 */
body#page_18 .html_post:has(iframe),    /* PC: 地図ブロック(width_one_column) */
body#page_18 .html_area:has(iframe) {   /* SP: 地図ブロック(html_area) */
  display: none !important;
}

/* ===== info(アクセス) SALON INFO 表「代表者」行 一時非表示（2026-06-24）=====
   オーナー様のお名前が未確定のため、表の「代表者」行だけを隠す（トップページと統一）。
   公開する時はこの【ブロックごと削除】し、build_pages.py の BODY_TEXT["info"] に
   ("松田 彩","お名前") を足して再生成すれば表に実名が入る。PC=value_cell_3 / SP=value_2 の行のみ対象。 */
body#page_18 tr:has(td.value_cell_3),   /* PC: 代表者行 */
body#page_18 tr:has(td.value_2) {       /* SP: 代表者行 */
  display: none !important;
}

/* ===== メニュー・料金(others) 体験メニュー表（build_pages.py が差し込む .joie_menu）=====
   元サイトの price 表は施術ごと（colorer専用）だったため、ジョワの体験メニューを1枚の表に作り替え。
   colorer の menu_area/td_cell はPCで実質無装飾だったので、PC/SP 共通でこの自前ルールで整える。
   ※APPLY_BODY_TEXT=False で others が元(colorer)に戻ると .joie_menu は出力されず、本ルールは未使用（無害）。 */
table.joie_menu { width:100%; border-collapse:collapse; }
table.joie_menu td {
  padding:14px 6px; border-bottom:1px dotted #d6c9b4;
  vertical-align:top; font-size:15px; line-height:1.5; color:#4a4036;
}
table.joie_menu td.mname { text-align:left; padding-right:14px; }
/* 説明文（名前の下の小さい灰色テキスト）。※名前を包む .mnametext には当てない */
table.joie_menu td.mname > span:not(.mnametext) { display:block; font-size:12px; color:#9b8a73; margin-top:4px; }  /* 直下子限定：joie_tweaksのnowidow入れ子spanに誤マッチして強制改行になるため(v33) */
/* 価格は絶対に改行させない。sp.css の「th,td{white-space:initial !important}」に負けないよう !important（v34） */
table.joie_menu td.mprice { text-align:right; white-space:nowrap !important; word-break:normal !important; font-weight:bold; width:1%; padding-left:8px; color:#7a6a52; }
/* 名前は joie_tweaks.js が .mnametext で包み、1行に収まるようフォントを自動フィット（長い名前だけ縮小）。
   色・サイズ・太さは td（本文色 #4a4036・14/15px）を継承させる。 */
table.joie_menu td.mname .mnametext { display:inline-block; white-space:nowrap; }
@media screen and (max-width:768px){
  table.joie_menu td { font-size:14px; padding:12px 2px; }
  table.joie_menu td.mname { padding-right:8px; }               /* 名前列の幅を最大化 */
  table.joie_menu td.mprice { font-size:13px; padding-left:6px; }
  table.joie_menu td.mname > span:not(.mnametext) { font-size:11px; white-space:normal; }  /* 説明文は通常どおり折返し */
}

/* ===== 作り替えページ(mask/others/product)の見出しバンド（build_pages.py が付与する .joie_head）=====
   元サイトの見出し(headline_title/entry_title)は band 画像＋白文字で、PC/SP やモード次第で背景画像が
   外れると“白地に白文字”で読めなくなる。差し込みブロックでは画像非依存の自前バンドにして、PC・SP とも
   濃色文字＋左アクセントで確実に可読化する（元サイトの上品なトーンに合わせた色）。*/
.joie_head{
  background:none !important; color:#5a4a36 !important;
  font-weight:bold; line-height:1.5; height:auto !important;
  padding:9px 0 9px 16px; margin:0 0 16px;
  border-left:5px solid #c9a96a; border-bottom:1px solid #e6ddcf;
  text-align:left !important; font-size:20px;
}
.joie_head.joie_lead{ font-size:24px; }
.joie_head br{ display:none; }
@media screen and (max-width:768px){
  .joie_head{ font-size:18px; padding:8px 0 8px 12px; }
  .joie_head.joie_lead{ font-size:21px; }
}

/* 差し込みブロックの写真枠（中央寄せ・幅制御）。colorer .eyecatch の float/幅依存を避けた自前枠。 */
.joie_photo{ max-width:480px; margin:18px auto; }
.joie_photo img{ width:100%; height:auto; display:block; border-radius:4px; }

/* ===== PCグローバルナビをテキスト化（2026-06-25）=====
   元サイトのPC上部メニューは topnavi.png（1150×80・英字 JETPEEL/HYDRO JELLY MASK… を焼き込み）を
   背景スプライトで表示し、本来のリンク文字は text-indent:-9999px で画面外に隠していた。
   build_pages.py 側でリンク文字は既に日本語（コンセプト/サロンの特徴/メニュー・料金/予約の流れ/
   アクセス/ブログ）へ改題済みなので、ここで「背景画像を外して文字を表に出す」だけで日本語ナビになる。
   ＝topnavi.png（およびホバー用 topnavi_on.png）は画像差し替え不要になる。
   ◆レイアウト維持方針：各項目の幅(110/180/190/130/120/180px)と gnavi14 の margin-left:240px は
     “中央ロゴ(sp1.gif)用の隙間”なので【変更しない】。文字を各スロット内で中央寄せするだけ。
   ◆元に戻す時：この【ブロックごと削除】すれば元の画像ナビ(topnavi.png)に戻る。
   ◆将来ロゴを差し替え・横並びを詰めたい場合は幅と margin-left をここで微調整可能。 */
@media screen and (min-width:769px){
  div#access li.menu-item{ text-indent:0 !important; }            /* 画面外退避を解除 */
  div#access #menu-gnavi li.menu-item a{
    background:none !important;                                    /* topnavi.png スプライトを無効化 */
    text-indent:0 !important;
    text-align:center;                                            /* 各スロット内で文字中央寄せ */
    color:#5a4a36 !important;                                      /* 濃ブラウン（.joie_head と統一） */
    font-size:15px; font-weight:500; letter-spacing:.03em;
    /* width / height:80px / line-height:80px / margin-left は元CSSのまま（ロゴ用スペース維持） */
  }
  div#access #menu-gnavi li.menu-item a:hover{ color:#c9a96a !important; }       /* ホバーはゴールド文字 */
  div#access #menu-gnavi li.current-menu-item a{ color:#c9a96a !important; }     /* 現在ページを強調 */
  /* 旧ホバー画像(topnavi_on.png)のオーバーレイ疑似要素を無効化 */
  div#access #menu-gnavi > .menu-item > a::after{ display:none !important; content:none !important; }
}

/* ===== トップ「4サービスバナー」をテキスト化（2026-06-25）=====
   元は `banner_4_navi_01〜04.png`（英字ワードマーク JET PEEL 等／元データに HYDORO・CABOXY の綴りミス）を
   600px幅スプライトの左半分だけクリップ表示していた。背景 `banner_4_bg.jpg`（淡いピンク）の上に、
   日本語テキストのカードを置く方式へ。＝`banner_4_navi_*.png` は不要に。
   ◆元に戻す：index.html の該当 `<a class="joie_svcbtn">日本語</a>` を
     `<img src="assets/img/banner_4_navi_0X.png">` に戻すだけ（このCSSは残しても無害）。 */
@media screen and (min-width:769px){
  #fczukxuprqc6nmwq7e91 .joie_svcbtn{
    display:flex; align-items:center; justify-content:center; gap:.55em;
    width:100%; height:90px; box-sizing:border-box;
    background:rgba(255,255,255,.55); border:1px solid #e6ddcf;
    color:#5a4a36; font-size:18px; letter-spacing:.08em; text-decoration:none;
    transition:background .2s ease, color .2s ease;
  }
  #fczukxuprqc6nmwq7e91 .joie_svcbtn:hover{ background:rgba(255,255,255,.92); color:#c9a96a; }
  #fczukxuprqc6nmwq7e91 .joie_svcbtn .joie_svcplus{ color:#c9a96a; font-size:15px; font-weight:normal; }
}

/* ===== Private salon(db05) の日本語見出しをHTMLで表示（2026-06-25）=====
   db05 は他セクションと違い「英語見出し↔本文」が密着し、画像内のサブ文字を見出し直下に置く隙間が無い
   （画像に焼くと最下部に浮く／本文の下に来てしまう）。元から隠れていた H2「隠れ家プライベートサロン」を
   PC で表示し、英語見出し(Private salon)の直下に正しく配置（本文は自然に下がる）。画像側はキャッチを焼かず
   写真のみ。整列・位置が HTML で安定（ビューポート幅・字面に依存しない）。Mac はヒラギノ明朝で焼き文字と同調。
   ◆元に戻す：このブロック削除（H2 は再び非表示・画像のサブ文字方式へ）。 */
@media screen and (min-width:769px){
  #eeb6bvrrzg2ucuif28wr .headline_title,
  #u1ino5wdlx7pom3s5hng .headline_title,
  #ij3q0of328y62atuizo9 .headline_title,
  #bf27rc2ye1y3grgmjjj3 .headline_title,
  #qgkvfkez8acniahss5m3 .headline_title{
    display:block !important;
    background:none !important; border:none !important; height:auto !important;
    font-family:"Hiragino Mincho ProN","Noto Serif JP",serif !important;
    font-size:26px !important; font-weight:normal !important; color:#4a4036 !important;
    text-align:left !important; line-height:1.6 !important; letter-spacing:.02em !important;
    margin:6px 0 16px !important; padding:0 !important; text-indent:0 !important;
  }
}

/* ===== 英語見出し↔日本語サブの間隔を Private salon に統一（2026-06-30）=====
   英語ラベル（.design_block）は pc.css で position:absolute（top:-130px。Glow facial は font-size:55px、
   Private salon のみ font-size:62px+top:-80px）。H2サブを通常フロー先頭(entry_post content top)に置くと、
   英語ラベル(高い位置)との間が 81〜91px も開く。元 colorer は英語直下 y≈520 にサブを焼き込んでおり、
   本来は「英語＋サブ＝24px の密着ペア」だった（私が H2 を追加したことで本文ごと約66px下がっていた）。
   各セクションの英語下端に合わせ H2 を負マージンで引き上げ、全5ブロックを Private salon と同値
   「英語→サブ 24px ／ サブ→本文 16px」に統一する。英語ラベルと swirl の位置関係は不変（H2のみ移動）。
   値は固定px（font-size と padding-top から算出）でビューポート幅に依存しない。実測で全て 24px を確認。
   ◆元に戻す：このブロック削除（margin-top は上の 6px に戻る）。 */
@media screen and (min-width:769px){
  #eeb6bvrrzg2ucuif28wr .headline_title{ margin-top:-61px !important; } /* Concept       pt20 fz65 */
  #u1ino5wdlx7pom3s5hng .headline_title{ margin-top:-61px !important; } /* Lift up        pt20 fz65 */
  #ij3q0of328y62atuizo9 .headline_title{ margin-top:-61px !important; } /* Facial training pt20 fz65 */
  #bf27rc2ye1y3grgmjjj3 .headline_title{ margin-top:-51px !important; } /* Glow facial    pt0  fz55 */
  /* qgkvfkez(Private salon) は元から top:-80px で 24px → margin-top:6px のまま（変更不要） */
}

/* --- PC : ヘッダーの円形ロゴを少し小さく（ユーザー要望 2026-06-30） ---
   元 pc.css は #header_information .main_header a img を 240×240
   （branding_box_bg.png を background center center／size:auto＝原寸表示）。
   枠を 190×190 に縮小し background-size も合わせて画像を枠に収める（原寸依存を上書き）。
   水平中心(left:50%+35px / translateX-50%)・top:0 は不変＝中心同じで一回り小さく、
   ヒーローへの張り出しも約50px減る。スクロール固定の小ロゴ(.fixed 162→130)も比例縮小。
   ◆元に戻す：このブロック削除（240/162 に戻る）。 */
@media screen and (min-width:769px){
  #header_information .main_header a img{
    width:190px; height:190px;
    background-size:190px 190px;
  }
  #header_information.fixed .main_header a img{
    width:130px; height:130px;
    background-size:130px 130px;
  }
}

/* ===== トップ写真ギャラリー(#azs2x18・無限横スクロール)の表示修正 (2026-07-01) =====
   不具合: 画像が height="200"(HTML属性)を無視して原寸(縦数千px)で描画され、
   200pxの窓にクリップ＝「一部だけ拡大」状態に（特にSPで顕著）。縦サイズを固定して全体表示にする。
   併せて元画像 6000×4000(計124MB)→1200px幅へ圧縮済み(原本 _backup/2026-07-01_gallery-resize)。
   ◆元に戻す：このブロック削除。 */
#slideazs2x18bdfd0b1ftok42,
#slideazs2x18bdfd0b1ftok42 ul,
#slideazs2x18bdfd0b1ftok42 li{ height:200px !important; }
#slideazs2x18bdfd0b1ftok42 img{
  height:200px !important; width:auto !important; max-width:none !important;
}
@media screen and (max-width:768px){
  #slideazs2x18bdfd0b1ftok42,
  #slideazs2x18bdfd0b1ftok42 ul,
  #slideazs2x18bdfd0b1ftok42 li{ height:140px !important; }
  #slideazs2x18bdfd0b1ftok42 img{ height:140px !important; }
}

/* ===== ブランドアクセント：ロゴのグリーン＆ゴールド（2026-07-01）=====
   ロゴ(branding_box_bg.png)より抽出：セージグリーンを主役、ゴールドを差し色に。
   すべて“後勝ち”の上書き。ロールバックはこのブロック削除＋clone.css?v/js?v を戻すだけ（画像は無変更）。 */
:root{
  --joie-green:#5b6a45;       /* ロゴのセージグリーン（主役） */
  --joie-green-deep:#3e4a2e;  /* 濃緑：ホバー/強調 */
  --joie-gold:#b89759;        /* ロゴのゴールド（装飾・下線） */
  --joie-gold-text:#a8863f;   /* 価格文字用：可読性のため一段濃いめ */

  /* ===== 全面グリーン/ゴールド化（2026-07-03）=====
     common.css の暖色ブランド変数（茶/モーヴ）を緑へ上書き。
     これ1か所で全ページ（PC/SP）のリンク・ボタン・枠線・区切り線が緑金基調になる。
     ロールバック：この3行を削除（元は #bc9f95 / #c2aea7 / #dfcec4）。 */
  --brand:#5b6a45;            /* メインカラー(リンク・ボタン) 旧#bc9f95 → セージ緑 */
  --brand2:#7e8b5c;           /* サブ(コピーライト/小見出し) 旧#c2aea7 → 中間セージ */
  --loading-bg:#8f9156;       /* ローディング背景 旧#dfcec4 → 緑金 */
}

/* ① セクション見出し：左の縦バー＝緑／下線も緑で統一（文字色ブラウンは維持） */
.joie_head{ border-left-color:var(--joie-green); border-bottom-color:var(--joie-green); }

/* ① PCグローバルナビ：現在ページ=緑／ホバー=濃緑（通常時の文字は据置） */
@media screen and (min-width:769px){
  div#access #menu-gnavi li.current-menu-item a{ color:var(--joie-green) !important; }
  div#access #menu-gnavi li.menu-item a:hover{ color:var(--joie-green-deep) !important; }
}

/* ② メニュー表：価格=ゴールド／行区切りの点線=淡いグリーン */
table.joie_menu td{ border-bottom-color:rgba(91,106,69,.32) !important; }
table.joie_menu td.mprice{ color:var(--joie-gold-text); }

/* ③ 本文リンク=緑（ホバー濃緑）。ナビ/サービスボタン/画像リンクには当てない */
.post_data a:not(.joie_svcbtn), .entry_post a:not(.joie_svcbtn){ color:var(--joie-green) !important; }
.post_data a:not(.joie_svcbtn):hover, .entry_post a:not(.joie_svcbtn):hover{ color:var(--joie-green-deep) !important; }

/* ③ トップのサービスボタン：ホバー文字＝濃緑／＋記号＝緑 */
@media screen and (min-width:769px){
  #fczukxuprqc6nmwq7e91 .joie_svcbtn:hover{ color:var(--joie-green-deep); }
  #fczukxuprqc6nmwq7e91 .joie_svcbtn .joie_svcplus{ color:var(--joie-green); }
}

/* ③ 電話モーダル（jQuery UI ダイアログ）の水色 #00A0DE → 緑 */
.ui-widget-header{ background-color:var(--joie-green) !important; border-color:var(--joie-green) !important; }
span.shop_name{ border-left-color:var(--joie-green) !important; }
a.tel_links:hover{ color:var(--joie-green-deep) !important; }
.ui-dialog .ui-dialog-buttonpane button{ color:var(--joie-green-deep) !important; border-color:var(--joie-green) !important; }

/* ④ チェックマーク ☑（joie_tweaks.js が span.joie-check で包む）=緑 */
.joie-check{ color:var(--joie-green); }

/* ④ 細い区切り線：緑を淡く */
hr{ border-color:rgba(91,106,69,.5); }

/* ===== 中ページ SNSバナー(#df4c)：HotPepper 非表示（2026-07-03）=====
   トップページは既に HTML を LINE＋Instagram の2枚に手修正済み。中ページ(build生成)は
   元colorerテンプレ由来で HotPepper/Instagram/LINE の3枚のまま残るため、HPB列だけを隠す。
   ・ハズせるよう :has() で「hotpepperリンクを含む列」をピンポイント指定（トップは該当なし＝無害）。
   ・PC は HPB を消すと Instagram(float_left)＋LINE(float_right) で中央に隙間が空くので、
     LINE を float_left に寄せて2枚を隣接させる（トップに float_right.field_3col は無く無害）。
   ・SP は既存(2026-07-01)の「2枚を40%中央寄せ」ルールがそのまま効く。
   恒久対応するなら build_pages.py 側(SP_SNS_MARKUP / PC生成)からHPB列を除去。 */
#df4cqjklib0x3yc5k5sy .field_3col:has(a[href*="hotpepper"]),
#df4cqjklib0x3yc5k5sy .column_3:has(a[href*="hotpepper"]){ display:none !important; }
#df4cqjklib0x3yc5k5sy .easys_content_inner.only-pc .float_right.field_3col{ float:left !important; }

/* ===== トップ「コンセプト」ブロック(#eeb6)：新コピー6段落の高さ対応（2026-07-07）=====
   pc.css(生成物・編集禁止)は #eeb6… { height:1030px } 固定＋ .entry_post { top:560px }（relativeの
   視覚オフセット＝親のauto高さに寄与しない）。新Conceptコピーでテキストが約400px はみ出し、
   次セクションに被るため：
   ・外枠と inner を height:auto（min-height:1030pxで従来レイアウト下限は維持）
   ・entry_post の top:560px を padding-top:580px（560+元のpadding-top:20px）に置換して
     フロー高さに算入させる（margin-top だと親を突き抜けて相殺され背景ごと下がるので不可）
   ・下に padding-bottom:70px の余白（.post_data の margin-bottom:50px と合わせ十分な空き）
   背景 db01_bg02.jpg は top-anchored・下端が白なので伸びても見た目はシームレス。SPは対象外。 */
@media screen and (min-width:769px){
  #eeb6bvrrzg2ucuif28wr,
  #eeb6bvrrzg2ucuif28wr .easys_content_inner{ height:auto; min-height:1030px; }
  #eeb6bvrrzg2ucuif28wr .entry_post_1015{ top:0; padding-top:580px; padding-bottom:70px; }
}

/* ===== PC「Concept」英語ラベルの復元 (2026-07-08) =====
   v27 で #eeb6bvrrzg2ucuif28wr .entry_post_1015 を top:560px→top:0+padding-top:580px に変更した際、
   footer_pc.js 注入の英語ラベル（.design_block.block1、pc.css で absolute top:-130px）が
   560px の基準を失い y=-130 に飛んで非表示になっていた。旧視覚位置 560-130=430px に固定して復元。
   ◆元に戻す：このブロック削除。 */
@media screen and (min-width:769px){
  #eeb6bvrrzg2ucuif28wr .entry_post > .design_block.block1{ top:430px; }
}

/* ===== 風にそよぐ枝スプリグ v4 — SVGオーバーレイ (2026-07-23, v29) =====
   旧: 背景画像への焼き込み（leaf_sprig_v3.png）→ 廃止し背景はクリーン版に復元。
   新: _raw/leaf_sprig_v4_svg.py が index.html の JSPRIG マーカー間へ
       インラインSVGを注入。葉1枚ごとに時間差でそよぎ、全体も基部支点で揺れる。
   配置: 大×2 = キャッチコピー(#eeb6…)・表情筋トレ(#ij3q…)
         小×2 = ボワール(#u1ino…)・隠れ家サロン(#qgkv…)
   ◆デザイン改稿は leaf_sprig_v4_svg.py を再実行（マーカー間が置換される）。 */
.jsprig-spot{
  position:absolute;
  pointer-events:none;
  z-index:2;
  line-height:0;
}
.jsprig{display:block;width:100%;height:auto;overflow:visible;}
.jsprig-root{
  transform-box:view-box;
  transform-origin:36px 232px;
  animation:jsprig-sway 7.5s ease-in-out infinite;
}
.jlf{animation:jlf-flutter-a var(--fd,5s) ease-in-out var(--fdel,0s) infinite;}
.jlf-b{animation-name:jlf-flutter-b;}
@keyframes jsprig-sway{
  0%,100%{transform:rotate(0deg)}
  30%{transform:rotate(1.7deg)}
  52%{transform:rotate(.5deg)}
  74%{transform:rotate(2.3deg)}
}
@keyframes jlf-flutter-a{
  0%,100%{transform:rotate(0deg)}
  45%{transform:rotate(3.2deg)}
  70%{transform:rotate(-1.6deg)}
}
@keyframes jlf-flutter-b{
  0%,100%{transform:rotate(0deg)}
  40%{transform:rotate(5deg)}
  68%{transform:rotate(-2.4deg)}
}
/* 金の4点星キラキラ（v30）: 枝スウェイとは独立に、その場で時間差またたき */
.jstar{
  transform-box:fill-box;
  transform-origin:center;
  animation:jstar-twinkle var(--sd,3s) ease-in-out var(--sdel,0s) infinite;
}
@keyframes jstar-twinkle{
  0%,100%{opacity:.25;transform:scale(.72)}
  50%{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .jsprig-root,.jlf,.jstar{animation:none!important}
}

/* --- PC配置 ---
   大: キャッチコピー=写真上の白場 / 表情筋トレ=ベージュ角版下の白場（旧焼き込みと同位置）
   小: ボワール=写真上・金パネル左の白場 / 隠れ家=ベージュパネルと客室写真の間の白場 */
@media screen and (min-width:769px){
  #eeb6bvrrzg2ucuif28wr .jsprig-spot{ left:calc(50% - 640px); top:150px; width:470px; }
  #ij3q0of328y62atuizo9 .jsprig-spot{ left:calc(50% + 30px);  top:960px; width:470px; }
  #u1ino5wdlx7pom3s5hng .jsprig-spot{ left:calc(50% - 490px); top:110px; width:235px; }
  #qgkvfkez8acniahss5m3 .jsprig-spot{ left:calc(50% + 300px); top:380px; width:235px; }
  /* 画面右側の枝は左右反転（基部=右・葉先=中央向き）。左側は正向きのまま */
  #ij3q0of328y62atuizo9 .jsprig-spot,
  #qgkvfkez8acniahss5m3 .jsprig-spot{ transform:scaleX(-1); }
}

/* --- SP配置（背景は640px基準・100vwスケール） ---
   Concept=写真下・見出し上の白場 / Facial=リンク下の白場 /
   Lift up=セクション冒頭右の白場 / Private=見出し上の白場 */
@media screen and (max-width:768px){
  #eeb6bvrrzg2ucuif28wr .jsprig-spot{ left:5vw;  top:114vw; width:54vw; }
  #ij3q0of328y62atuizo9 .jsprig-spot{ left:40vw; top:172vw; width:54vw; }
  #u1ino5wdlx7pom3s5hng .jsprig-spot{ left:64vw; top:4vw;   width:30vw; }
  #qgkvfkez8acniahss5m3 .jsprig-spot{ left:62vw; top:2vw;   width:30vw; }
  /* SPで画面右側にある枝は左右反転（SPはボワールも右配置なので対象） */
  #u1ino5wdlx7pom3s5hng .jsprig-spot,
  #ij3q0of328y62atuizo9 .jsprig-spot,
  #qgkvfkez8acniahss5m3 .jsprig-spot{ transform:scaleX(-1); }
}

/* ===== v32: メニュー・料金 全面改定（2026-07-24 客先LINE原稿）=====
   .mnext  = 価格セル2行目（次回予約/通常価格）。td.mprice は nowrap のため block で改行。
   .joie_note = 料金表下の注記・特典文（既存の inline 12px 注記と同トーン）。 */
table.joie_menu td.mprice .mnext{
  display:block; font-size:11px; font-weight:normal; color:#9b8a73; margin-top:2px;
  white-space:nowrap !important; /* 「次回予約 ¥12,000」等も1行厳守（v34） */
}
.joie_note{ font-size:12px; color:#7a6a52; }
@media screen and (max-width:768px){
  table.joie_menu td.mprice .mnext{ font-size:10px; }
  .joie_note{ font-size:11px; }
}

/* SPは長いメニュー名で表がはみ出すため、名前の折返しを許可（joie_tweaks の inline nowrap より優先）。
   nowrap＋自動縮小は td 自体が広がると発動しない（clientWidth基準）ため、SPでは折返しが正。 */
@media screen and (max-width:768px){
  table.joie_menu td.mname .mnametext{ white-space:normal !important; }
}

/* ===== v33: コンセプトSTEP列の中央寄せ（2026-07-24）=====
   4→3アプローチ化でSTEP4を除去した分、右に約245pxの空きが出るため
   3列(225px×3＋20pxギャップ×2＝715px)を960px親の中央へ（(960-715)/2≒122px） */
@media screen and (min-width:769px){
  #e53m3vgqdylx3ip62atv .sub_post.sub_post_0{ margin-left:122px; }
}

/* ===== v34: 泣き別れ対策（2026-07-24）=====
   テーマの word-break:break-all は「10分」「¥13,000」等を数字の途中でも千切る
   （break-all は WORD JOINER の改行禁止より優先されるため）。
   SALON INFO 表の値セルは通常の日本語折返しに戻す（長い英単語だけ break-word で救済）。 */
td.td_value{ word-break:normal !important; overflow-wrap:break-word; }

/* ===== v35: 折返しバランス（2026-07-24）=====
   泣き別れ防止（末尾グループ接着）だけだと1行目が他行より極端に早く折れて
   見えるケースがある（例:「…年齢が出や/すい首元をケア」）。短文ブロックは
   text-wrap:balance で2行を均等長に折り返し、視覚的な段差をなくす。
   （未対応ブラウザは従来表示のまま＝無害なプログレッシブ改善） */
table.joie_menu td.mname > span:not(.mnametext),
table.joie_menu td.mname .mnametext,
.joie_note{ text-wrap:balance; }