/* 出張バーテンダー（/bartender/）専用の上書き — 2026-11-07 デザインマニュアル（Projects/design/）で見直し
   Cureate9 の style.css は会社サイト全体で共通なので触らず、このページだけをここで上書きする。読み込みは bartender/index.html だけ。
   1 写真・背景を WebP に（03 L・05。ページの画像 約 21MB → 約 2MB）
   2 本文 14px → 16px・行間 1.8（07 ルール 4）。書体は明朝（見出し・数字）とゴシック（本文）の 2 つ、太さは 400 / 700 の 2 つ（07 ルール 1・6。Roboto をやめ、読み込んでいない明朝の太字・500 をやめる）
   3 動きはデザイナーの元のまま（2026-11-07 夜に戻した。下の 3 を参照）
   4 押す場所 44px 以上（20）
   5 問い合わせの入口（最初の画面の下・料金の下・スマホの追従ボタン）と対応地域の 1 行（08 下調べ） */

/* ---- 1 背景画像を WebP に（style.css と同じ指定を、ファイルだけ差し替え）---- */
#page-bartender .fv { background-image: url("/assets/img/bartender/bartender-mv-bg.webp"); }
.page-bartender-faq { background-image: url("/assets/img/bartender/faq-bg.webp"); }
.page-bartender-flow { background-image: url("/assets/img/bartender/flow-bg.webp") !important; }
.page-bartender-about { background-image: url("/assets/img/bartender/bartender-about-bg.webp") !important; }
.page-bartender-youtube { background-image: url("/assets/img/bartender/bartender-video-bg.webp") !important; }
.page-bartender-scene { background-image: url("/assets/img/bartender/faq-bg.webp"); }
.page-bartender-price { background-image: url("/assets/img/bartender/bartender-video-bg.webp") !important; }
.page-bartender-instagram { background-image: url("/assets/img/bartender/instagram-bg.webp") !important; }
@media screen and (max-width: 768px) {
  .page-bartender-about { background-image: url("/assets/img/bartender/about-bg1-sp.webp") !important; }
  .page-bartender-scene { background-image: url("/assets/img/bartender/scene-sp-bg.webp"); }
}

/* ---- 2 文字 ---- */
#page-bartender :is(.page-bartender-about__txt, .page-bartender-section-ttl-txt, .page-bartender-scene__card-txt, .page-bartender-service__txt,
  .page-bartender-record__item, .page-bartender-price__txt, .page-bartender-flow__table-txt, .page-bartender-faq__faq__answer, .page-bartender-intro__txt) {
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.8;
}
#page-bartender .fv-ttl .jp { font-size: 16px; font-weight: 400; }
#page-bartender :is(.num, .page-bartender-flow-number, .page-bartender-faq__faq__q-icon) { font-family: "Noto Serif JP", serif; font-weight: 400; }
/* 明朝は 400 しか読み込んでいない（太字は偽の太字になる）ので 400 に。大きさで差を付ける */
#page-bartender :is(.en, .en-insta, .page-bartender-price__sub-ttl, .page-bartender-faq__faq__q-text, .page-bartender-price__price, .page-bartender-price__yen) { font-weight: 400; }
#page-bartender :is(.jp, .page-bartender-record__item, .page-bartender-intro__txt, .page-bartender-record__moji, .page-bartender-about__moji) { font-weight: 400; }

/* ---- 3 動き ----
   2026-11-07 夜に戻した: 1 回目の見直しで「最初の見出しだけ・0.9 秒」にし、ほかの 38 か所の「見えたら流れ込む」動きを止めていた。
   今の決まり（01・00 の 2-2「動きは必ず入れる」／23 の 4「人が作ったページの動きは替えない」）に合わせ、デザイナーの元の動き（style.css の .fade-text・2 秒で現れ 6 秒で止まる）に戻す。
   ここでは「視差効果を減らす」設定の人にだけ、動かさずに最初から表示する（05） */
@media (prefers-reduced-motion: reduce) { #page-bartender :is(.fade-text, .fade-text-delayed, .fade-text-delayed2) { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---- 4 押す場所 ---- */
#page-bartender .sbi_follow_btn a { min-height: 44px; display: inline-flex; align-items: center; }
#page-bartender .page-bartender-contact a[href*="privacy"] { display: inline-block; padding: 12px 0; }

/* ---- 5 問い合わせの入口と対応地域 ---- */
.bt-cta-wrap { margin: 32px 0 0; text-align: center; }
.bt-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 32px; border-radius: 999px;
  background: #d21010; color: #fff; font: 700 16px/1.4 "Noto Sans JP", "Hiragino Sans", sans-serif; text-decoration: none; transition: background .2s; }
.bt-cta:hover, .bt-cta:focus-visible { background: #a90c0c; color: #fff; }
.bt-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bt-cta:active { transform: translateY(1px); }
.bt-cta-note { display: block; margin-top: 12px; font: 400 14px/1.6 "Noto Sans JP", sans-serif; color: #fff; }
.bt-fv-band { position: relative; z-index: 6; background: #002349; padding: 24px 16px 28px; } /* 上の動画の枠が下にはみ出しているので、帯を上に重ねる */
.bt-fv-band .bt-cta-wrap { margin: 0; }
.bt-area { margin: 40px auto 0; max-width: 40em; text-align: center; font: 400 16px/1.8 "Noto Sans JP", sans-serif; color: #fff; }
.bt-sticky { display: none; }
@media screen and (max-width: 768px) {
  .bt-cta { width: 100%; padding: 0 16px; }
  .bt-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(0, 35, 73, .96); transform: translateY(110%); transition: transform .25s cubic-bezier(.16,1,.3,1); }
  .bt-sticky.is-on { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bt-sticky { transition: none; } }

/* ---- SNS アイコン（SVG） ---- */
.footer-sns img[src$=".svg"] { width: 32px; height: 32px; }

/* 見出しの小さな和文（「サービス」「料金表」など）も 400 に。フォームの選択肢は本文と同じ 16px に */
#page-bartender .page-bartender-section-ttl .jp { font-weight: 400; }
#page-bartender .page-bartender-contact :is(.wpcf7-list-item-label, label) { font-size: 16px; }

/* ---- 6 2026-11-07 2 回目（新しいマニュアルと 23_HUMAN_DESIGN.md 4・7 で見直し。鈴木さんが 1〜5 を選択）----
   人が作ったページなので、見た目の部品は替えない。直すのは構造と読みやすさだけ（05 コントラスト・impeccable）。
   HTML 側: 見出しの段の飛び（h2 → h4）を h3 に／背景の大きな英字（PERFORMANCE など・地の模様）を読み上げの対象から外す／“ ” を「」に（04） */

/* h4 → h3 にしたので、style.css の h3 全体の指定（大きさ 8rem・太さ 900・行間 1.1）が付かないよう、元の h4 の見た目に戻す */
#page-bartender h3.page-bartender-scene__card-sub-ttl { font-weight: 700; line-height: inherit; }
#page-bartender h3.page-bartender-price__sub-ttl { font-weight: 400; line-height: inherit; }

/* フォームの入力例の文字: 薄い青 #accaeb（白地に 1.7）→ 同じ青の系統で濃く #56738f（4.95） */
#page-bartender .contact-form-bartender__input ::placeholder,
#page-bartender .contact-form-bartender__row ::placeholder { color: #56738f !important; opacity: 1; }
/* 「必須」の札: 白い文字に金 #9c7c43（3.9）→ 金を一段だけ濃く #8c6d36（4.8）。札の中だけで、ほかの金は変えない */
#page-bartender .contact-form-bartender__label .Form-Item-Label-Required { background-color: #8c6d36 !important; }

/* ---- 7 2026-11-07 動きを足す（鈴木さんが 1〜4 を選択・js/bartender-motion.js）----
   料金の見出しの上下の線を、見えたら左から引く。元の線（#c2c2c2 の 1px）と同じ色・太さの線を描いて、元の線は JS が動くときだけ透明にする。
   動きを減らす設定・JS が無いときは元の線のまま */
@media (prefers-reduced-motion: no-preference) {
  .bt-motion #page-bartender .page-bartender-price__sub-ttl { position: relative; border-color: transparent; }
  .bt-motion #page-bartender .page-bartender-price__sub-ttl::before,
  .bt-motion #page-bartender .page-bartender-price__sub-ttl::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #c2c2c2;
    transform: scaleX(0); transform-origin: left center; transition: transform 1s cubic-bezier(.16,1,.3,1); }
  .bt-motion #page-bartender .page-bartender-price__sub-ttl::before { top: -1px; }
  .bt-motion #page-bartender .page-bartender-price__sub-ttl::after { bottom: -1px; transition-delay: .15s; }
  .bt-motion #page-bartender .page-bartender-price__sub-ttl.is-drawn::before,
  .bt-motion #page-bartender .page-bartender-price__sub-ttl.is-drawn::after { transform: none; }
  /* 動画の枠を角丸にしながら広げるので、はみ出しを切る */
  .bt-motion .page-bartender-youtube .youtube { overflow: hidden; will-change: transform; }
}

/* ---- 8 2026-11-07 お問い合わせのボタンに動くアイコン（鈴木さんが選択・design/15_LORDICON.md）----
   Lordicon「mail-open-document」（System Outline・無料版・白）。ボタンに乗った・押したときだけ動く（trigger="hover" target="a"・loop なし）。
   無料版は作者表示が必須なので、ページの最後に 1 行（.bt-credit） */
.bt-cta lord-icon { width: 1.5em; height: 1.5em; margin: -.2em .5em -.2em 0; flex: none; }
.bt-credit { margin: 0; padding: 16px; text-align: center; background: #002349; font: 400 12.8px/1.6 "Noto Sans JP", sans-serif; }
.bt-credit a { color: #c9d3de; text-underline-offset: .2em; }