/* =====================================================================
   Princess Care theme — 共通CSS
   ページ固有のスタイルは各テンプレート（front-page.php / page-xxx.php）内の <style> にある。
   ここにはヘッダー・フッター・汎用ページ・ボタンなど共通部分だけを書く。
   ===================================================================== */
:root {
  --pc-green: #1a3a2a;
  --pc-green-deep: #0f1c12;
  --pc-gold: #c8a84e;
  --pc-gold-hover: #dfc06a;
  --pc-gold-label: #8b6914;
  --pc-cream: #faf7f0;
  --pc-ink: #1e1e1e;
  --pc-gray: #6b6658;
  --pc-line: rgba(26, 58, 42, .1);
  --pc-serif: 'Noto Serif JP', Georgia, serif;
  --pc-sans: 'Noto Sans JP', sans-serif;
  --pc-header-h: 64px;
  --pc-container: 1200px;
}
@media (min-width: 768px) { :root { --pc-header-h: 80px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--pc-sans);
  font-weight: 300;
  line-height: 1.8;
  color: var(--pc-ink);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.pc-menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
iframe { max-width: 100%; }

/* ---------- ボタン（共通） ---------- */
.pc-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 14px 24px; border-radius: 2px;
  font-family: var(--pc-sans); font-size: 14px; font-weight: 400; letter-spacing: .08em;
  line-height: 1.45; text-align: center; text-decoration: none; white-space: normal;
  transition: background .25s, color .25s, border-color .25s;
}
.pc-btn__sub { font-size: 12px; opacity: .9; }
@media (min-width: 768px) {
  .pc-btn { flex-direction: row; flex-wrap: wrap; gap: .35em; }
  .pc-btn__sub { font-size: inherit; }
}
.pc-btn--gold { background: var(--pc-gold); color: #fff; }
.pc-btn--gold:hover { background: var(--pc-gold-hover); }
.pc-btn--outline { border: 1px solid var(--pc-gold); color: var(--pc-gold-label); background: transparent; }
.pc-btn--outline:hover { background: var(--pc-gold); color: #fff; }
.pc-btn--outline-light { border: 1px solid rgba(250, 247, 240, .5); color: var(--pc-cream); background: transparent; }
.pc-btn--outline-light:hover { border-color: var(--pc-gold); color: var(--pc-gold); }

/* ---------- ヘッダー ---------- */
.pc-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.pc-header.is-scrolled { border-bottom-color: var(--pc-line); box-shadow: 0 2px 16px rgba(26, 58, 42, .06); }
.pc-header__inner {
  max-width: var(--pc-container); margin: 0 auto; padding: 0 16px 0 20px;
  height: var(--pc-header-h); display: flex; align-items: center; gap: 24px;
}
.pc-header__logo { display: block; margin-right: auto; line-height: 0; }
.pc-header__logo img { height: 28px; width: auto; }
@media (min-width: 768px) { .pc-header__logo img { height: 36px; } }

.pc-nav { display: none; }
.pc-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.pc-nav__list a {
  position: relative; display: block; padding: 6px 0;
  font-size: 13.5px; font-weight: 400; letter-spacing: .06em; color: var(--pc-green); text-decoration: none;
}
.pc-nav__list a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--pc-gold); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.pc-nav__list a:hover::after, .pc-nav__list .current-menu-item a::after { transform: scaleX(1); }

.pc-header__cta { display: none; }
@media (min-width: 1024px) {
  .pc-nav { display: block; }
  .pc-header__cta {
    display: inline-flex; align-items: center; padding: 9px 18px; border: 1px solid var(--pc-gold); border-radius: 2px;
    font-size: 12.5px; font-weight: 400; letter-spacing: .12em; color: var(--pc-gold-label); text-decoration: none; white-space: nowrap;
    transition: background .25s, color .25s;
  }
  .pc-header__cta:hover { background: var(--pc-gold); color: #fff; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .pc-nav__list { gap: 18px; }
  .pc-nav__list a { font-size: 12.5px; }
}

/* ハンバーガー */
.pc-menu-btn {
  position: relative; z-index: 101; display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; padding: 10px; margin: 0; background: none; border: 0; cursor: pointer;
}
.pc-menu-btn span { display: block; width: 24px; height: 1.5px; background: var(--pc-green); transition: transform .3s, opacity .3s, background .3s; }
.pc-menu-btn.is-open span { background: var(--pc-cream); }
.pc-menu-btn.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.pc-menu-btn.is-open span:nth-child(2) { opacity: 0; }
.pc-menu-btn.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (min-width: 1024px) { .pc-menu-btn { display: none; } }

/* スマホ ドロワー */
.pc-drawer {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column;
  padding: calc(var(--pc-header-h) + 16px) 28px 40px;
  background: var(--pc-green); color: var(--pc-cream);
  transform: translateX(100%); transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  overflow-y: auto;
}
.pc-drawer.is-open { transform: none; }
.pc-drawer__list { list-style: none; margin: 0; padding: 0; }
.pc-drawer__list li { border-bottom: 1px solid rgba(250, 247, 240, .12); }
.pc-drawer__list a {
  display: flex; align-items: center; gap: 14px; padding: 15px 0;
  font-family: var(--pc-serif); font-size: 18px; font-weight: 300; letter-spacing: .08em; color: var(--pc-cream); text-decoration: none;
}
.pc-drawer__list a::before { content: ''; width: 14px; height: 1px; background: var(--pc-gold); flex-shrink: 0; }
.pc-drawer__actions { display: grid; gap: 12px; margin-top: 28px; }
.pc-drawer__note { margin: 20px 0 0; font-size: 11px; letter-spacing: .06em; opacity: .6; }
.pc-drawer-overlay { position: fixed; inset: 0; z-index: 98; background: rgba(15, 28, 18, .4); }
@media (min-width: 1024px) { .pc-drawer, .pc-drawer-overlay { display: none; } }

/* ---------- メインコンテンツの器 ----------
   各ページのHTMLは「スマホ: margin:0 -20px / PC: margin:0 calc(50% - 50vw)」で全幅化する前提。
   そのため器は「左右20pxの余白＋中央寄せ1200px」にしておく（旧SWELLと同じ条件）。 */
.pc-main { display: block; min-height: 40vh; }
.pc-article { max-width: var(--pc-container); margin: 0 auto; padding: 0 20px; }

/* ---------- 汎用ページ（Q&A・お問い合わせ・運営会社・プライバシーポリシー） ---------- */
.pc-page { max-width: 860px; margin: 0 auto; padding: 48px 20px 96px; }
@media (min-width: 768px) { .pc-page { padding: 72px 20px 120px; } }
.pc-page__head { text-align: center; margin-bottom: 40px; }
.pc-page__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: 12px; font-weight: 400; letter-spacing: .24em; color: var(--pc-gold); text-transform: uppercase;
}
.pc-page__eyebrow::before, .pc-page__eyebrow::after { content: ''; width: 18px; height: 1px; background: var(--pc-gold); }
.pc-page__title {
  margin: 0; font-family: var(--pc-serif); font-weight: 300; font-size: clamp(28px, 5vw, 40px);
  letter-spacing: .06em; line-height: 1.3; color: var(--pc-green);
}
.pc-page__body { font-size: 15px; color: #333; }
.pc-page__body > *:first-child { margin-top: 0; }
.pc-page__body h2 {
  position: relative; margin: 52px 0 20px; padding-left: 16px;
  font-family: var(--pc-serif); font-weight: 400; font-size: 22px; line-height: 1.5; letter-spacing: .04em; color: var(--pc-green);
}
.pc-page__body h2::before { content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; background: var(--pc-gold); }
.pc-page__body h2.has-text-align-center { padding-left: 0; text-align: center; }
.pc-page__body h2.has-text-align-center::before { display: none; }
.pc-page__body h3 { margin: 32px 0 10px; font-weight: 500; font-size: 17px; line-height: 1.6; color: var(--pc-green); }
.pc-page__body p { margin: 0 0 1.2em; }
.pc-page__body ul, .pc-page__body ol { padding-left: 1.4em; margin: 0 0 1.4em; }
.pc-page__body li { margin: .3em 0; }
.pc-page__body a { color: var(--pc-gold-label); }
.pc-page__body figure { margin: 0 0 1.6em; }
.pc-page__body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pc-page__body th, .pc-page__body td { padding: 12px 14px; border: 1px solid #e6e1d6; text-align: left; vertical-align: top; }
.pc-page__body tr > td:first-child, .pc-page__body th { background: var(--pc-cream); color: var(--pc-green); font-weight: 400; white-space: nowrap; }
.pc-page__body iframe { width: 100%; border: 0; display: block; margin: 0 0 1.6em; }

/* 旧SWELLのボタンブロックが本文に残っていても、ゴールドのボタンとして表示する */
.pc-page__body .swell-block-button { margin: 0 0 1.6em; text-align: center; }
.pc-page__body .swell-block-button__link {
  display: inline-block; padding: 14px 28px; border-radius: 2px; background: var(--pc-gold); color: #fff;
  font-size: 14px; font-weight: 400; letter-spacing: .08em; text-decoration: none; transition: background .25s;
}
.pc-page__body .swell-block-button__link:hover { background: var(--pc-gold-hover); }
.pc-page__body .swl-inline-icon { display: none; }

/* Contact Form 7 */
.pc-page__body .wpcf7 { margin-top: 8px; }
.pc-page__body .wpcf7 label { display: block; font-weight: 400; font-size: 14px; color: var(--pc-green); }
.pc-page__body .wpcf7 .required { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 2px; background: var(--pc-gold); color: #fff; font-size: 10px; letter-spacing: .1em; vertical-align: middle; }
.pc-page__body .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.pc-page__body .wpcf7 input[type="text"], .pc-page__body .wpcf7 input[type="email"], .pc-page__body .wpcf7 input[type="tel"],
.pc-page__body .wpcf7 input[type="url"], .pc-page__body .wpcf7 textarea, .pc-page__body .wpcf7 select {
  width: 100%; padding: 12px 14px; border: 1px solid #d8d2c4; border-radius: 4px; background: #fff;
  font: inherit; font-size: 15px; color: var(--pc-ink); transition: border-color .2s;
}
.pc-page__body .wpcf7 input:focus, .pc-page__body .wpcf7 textarea:focus { outline: none; border-color: var(--pc-gold); }
.pc-page__body .wpcf7 textarea { min-height: 180px; }
.pc-page__body .wpcf7-submit {
  display: block; width: 100%; max-width: 360px; margin: 8px auto 0; padding: 16px 24px;
  border: 0; border-radius: 2px; background: var(--pc-gold); color: #fff; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 400; letter-spacing: .12em; transition: background .25s;
}
.pc-page__body .wpcf7-submit:hover { background: var(--pc-gold-hover); }
.pc-page__body .wpcf7-spinner { display: block; margin: 8px auto 0; }
.pc-page__body .wpcf7-not-valid-tip { font-size: 12px; color: #b3261e; }
.pc-page__body .wpcf7-response-output { margin: 20px 0 0; padding: 12px 16px; border: 1px solid var(--pc-gold) !important; border-radius: 4px; font-size: 14px; }

/* 404 */
.pc-404 { text-align: center; }
.pc-404__lead { margin: 20px 0 32px; color: var(--pc-gray); }
.pc-404__actions { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 0 auto; }

/* ---------- フッター ---------- */
.pc-footer { background: var(--pc-green); color: rgba(250, 247, 240, .82); font-size: 13px; }
.pc-footer a { text-decoration: none; transition: color .25s; }
.pc-footer a:hover { color: var(--pc-gold); }
.pc-footer__inner {
  max-width: var(--pc-container); margin: 0 auto; padding: 56px 20px 40px;
  display: grid; gap: 40px;
}
@media (min-width: 768px) {
  .pc-footer__inner { grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; padding: 72px 20px 48px; }
}
.pc-footer__logo { display: inline-block; line-height: 0; }
.pc-footer__logo img { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.pc-footer__origin {
  display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 10px;
  font-size: 11px; font-weight: 400; letter-spacing: .22em; color: var(--pc-gold);
}
.pc-footer__origin::before { content: ''; width: 18px; height: 1px; background: var(--pc-gold); }
.pc-footer__lead { margin: 0; line-height: 1.9; }
.pc-footer__label { margin: 0 0 14px; font-size: 11px; font-weight: 400; letter-spacing: .24em; color: var(--pc-gold); }
.pc-footer__list { list-style: none; margin: 0; padding: 0; }
.pc-footer__list li { margin: 0 0 10px; }
.pc-footer__list a { font-size: 13.5px; letter-spacing: .04em; color: rgba(250, 247, 240, .82); }
.pc-footer__store { display: grid; gap: 10px; align-content: start; }
.pc-footer__store .pc-btn { font-size: 13px; padding: 13px 18px; }
.pc-footer__company { margin: 14px 0 0; line-height: 1.9; font-size: 12.5px; }
.pc-footer__company span { font-weight: 400; color: var(--pc-cream); }
.pc-footer__bottom {
  border-top: 1px solid rgba(250, 247, 240, .1);
  max-width: var(--pc-container); margin: 0 auto; padding: 20px 20px 28px;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
@media (min-width: 768px) { .pc-footer__bottom { flex-direction: row; justify-content: space-between; } }
.pc-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.pc-footer__legal a { font-size: 12px; letter-spacing: .04em; }
.pc-footer__copy { margin: 0; font-size: 11px; letter-spacing: .08em; opacity: .6; }

/* =====================================================================
   ページ内の小さい文字・タップ領域の補正（2026-09-11 スマホ視認性）
   各テンプレートの <style> より優先させるため .pc-article を前置している。
   ===================================================================== */
/* 段落の中に単独で置かれたテキストリンク（「〜を見る →」など）は44px以上の高さで押せるようにする */
.pc-article p > a:only-child:not([class*="btn"]),
.pc-article .pct-nav a, .pc-article .pw-nav a, .pc-article .pv-nav a,
.pc-article .pct-acc-more, .pc-article .pw-howto-more, .pc-article .pv-howto-more,
.pc-article .phw-intro-jump, .pc-article .ps-cp-link,
.pc-article .pfl-plan-sub-link, .pc-article .pfl-video-link, .pc-article .pfl-consult-tel-num {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: 0 -6px;
}
/* 現場で読む数値・ラベルは最低12px。使用量は14px */
.pc-article .pct-num-label { font-size: 14px; }
.pc-article .pa-prod-tag { font-size: 12px; }
.pc-article .pl-treat-stat-label, .pc-article .pl-treat-tag, .pc-article .pl-keratin-vol, .pc-article .pl-keratin-lbl,
.pc-article .pl-home-card-desc, .pc-article .pl-keratin-desc, .pc-article .pl-keratin-lead-desc { font-size: 12px; }
.pc-article .pw-num-label, .pc-article .pw-kc-vol, .pc-article .pw-kc-lbl, .pc-article .pw-vs-note,
.pc-article .pv-num-label, .pc-article .pv-kc-vol, .pc-article .pv-kc-lbl, .pc-article .pv-fc-vol, .pc-article .pv-fc-lbl,
.pc-article .pv-vs-note, .pc-article .pv-howto-num, .pc-article .pv-flow-note { font-size: 12px; }
.pc-article .pw-step p, .pc-article .pv-step p, .pc-article .phw-step p { font-size: 13px; }
/* 使用量の目安（S→10g / M→15g / L→20g など）は現場でスマホを見ながら使う数値なので14px・太さ400 */
.pc-article .pw-step small, .pc-article .pv-step small, .pc-article .phw-step small { font-size: 14px; font-weight: 400; }
.pc-article .pw-vs-table thead th, .pc-article .pv-vs-table thead th { font-size: 12px; }
.pc-article .phw-item-vol, .pc-article .phw-step small, .pc-article .phw-trial-step-n, .pc-article .phw-video-cap { font-size: 12px; }
.pc-article .ps-ig-cap, .pc-article .ps-ig-tags, .pc-article .ps-05-photo-lbl, .pc-article .ps-cp-spec-lbl,
.pc-article .ps-flow-time, .pc-article .ps-flow-total-note, .pc-article .ps-badge-cat,
.pc-article .ps-cp-hair-lbl, .pc-article .ps-cp-hair-tag, .pc-article .ps-ig-uname, .pc-article .ps-ig-likes { font-size: 12px; }
.pc-article .ps-ig-time { font-size: 11px; }
.pc-article .ps-07-card-desc { font-size: 13px; }
.pc-article .pfl-plan-main-price-promo-note, .pc-article .pfl-plan-campaign-note-promo, .pc-article .pfl-plan-main-price-was-label,
.pc-article .pfl-homecare-tag, .pc-article .pfl-consult-tel-label, .pc-article .pfl-plan-main-sec-title,
.pc-article .pfl-plan-campaign-kicker-pill, .pc-article .pfl-plan-main-off-badge { font-size: 12px; }
/* 白・クリーム背景のゴールド文字は濃いゴールドに（数値・価格の可読性） */
.pc-article .pct-num-val em, .pc-article .pw-num-val em, .pc-article .pv-num-val em { color: #8b6914; }

/* reCAPTCHA バッジは隠し、規定の注記をフォーム下に表示（functions.php 参照） */
.grecaptcha-badge{visibility:hidden !important}
.pc-recaptcha-note{margin-top:16px;font-size:12px;line-height:1.7;color:#6b665e}
.pc-recaptcha-note a{color:#6b665e;text-decoration:underline}

/* ---------- LINE（2026-09-25） ---------- */
.pc-btn--line { background: #06c755; color: #fff; font-weight: 500; }
.pc-btn--line:hover { background: #05b04b; color: #fff; }
.pc-footer .pc-btn--line:hover,
.pc-line-box a.pc-btn--line, .pc-line-box a.pc-btn--line:hover, .pc-line-box a.pc-btn--line:visited { color: #fff; text-decoration: none; }
.pc-footer__line-hours { margin: -2px 0 0; font-size: 11.5px; letter-spacing: .04em; opacity: .75; }
.pc-line-box {
  display: grid; gap: 24px; align-items: center;
  margin: 0 0 40px; padding: 28px 22px;
  background: var(--pc-cream); border: 1px solid rgba(200, 168, 78, .45);
}
.pc-line-box--bottom { margin: 48px 0 0; }
.pc-line-box p { margin: 0; }
.pc-line-box__eyebrow { font-size: 11px; letter-spacing: .26em; color: var(--pc-gold-label); margin-bottom: 8px !important; }
.pc-line-box__title { font-family: var(--pc-serif); font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--pc-green); margin-bottom: 10px !important; }
.pc-line-box__text { font-size: 14px; line-height: 1.9; color: #333; margin-bottom: 10px !important; }
.pc-line-box__hours { font-size: 12.5px; line-height: 1.8; color: var(--pc-gray); margin-bottom: 18px !important; }
.pc-line-box__btn { max-width: 360px; font-size: 15px; padding: 15px 22px; }
.pc-line-box__qr { display: none; margin: 0; text-align: center; }
.pc-line-box__qr img { display: block; width: 132px; height: 132px; background: #fff; padding: 6px; border: 1px solid var(--pc-line); }
.pc-line-box__qr figcaption { margin-top: 6px; font-size: 11px; color: var(--pc-gray); letter-spacing: .06em; }
@media (min-width: 768px) {
  .pc-line-box { grid-template-columns: 1fr auto; gap: 32px; padding: 32px 36px; }
  .pc-line-box__qr { display: block; }
}
.pc-line-sec { max-width: 860px; margin: 0 auto; padding: 8px 20px 80px; }
.pc-line-sec .pc-line-box { margin: 0; }

/* 税込の併記（2026-10-02）：「¥2,500（税別）」の後ろに小さく「（税込 ¥2,750）」 */
.pc-tax { font-size: .82em; opacity: .88; white-space: nowrap; letter-spacing: .02em; }

/* Q&A（page-qa.php・2026-10-02）：上のオンラインストアボタン */
.pc-qa-store { text-align: center; margin: 0 0 36px; }
.pc-qa-store .pc-btn { display: inline-flex; min-width: 280px; }