/*
Theme Name:  Aroma Child
Template:    twentytwentyfive
Version:     1.0.0
Description: aroma-mock の WordPress 子テーマ（twentytwentyfive 継承）
Author:
Text Domain: aroma-child
*/

/* ============================================================
   style.css + sub.css を統合
   コンテナ幅 1040px（メイン 680 + サイドバー 320 + gap 40）
   PC ブレークポイント 768px
   ============================================================ */

:root {
  --container: 1000px;
  --main-w:    760px;
  --side-w:    200px; /* 760+40+200=1000でcontainer幅と一致（元240pxだと40pxオーバーしていた） */
  --gap:       40px;

  --c-base:   #f3eee9;
  --c-paper:  #ffffff;
  --c-accent: #A65A2E; /* ラスト（旧：赤 #a1203f） */
  --c-accent2:#2F3D2A; /* フォレスト（旧：ゴールド #8a6f3a） */
  --c-text:   #2C2C28; /* 旧 #333 */
  --c-sub:    #8d837c;
  --c-line:   #e3d9cf;
  --ph-bg:    #d9d2cb;
  --ph-fg:    #9a8f86;

  /* 依頼人フィードバック⑤：写真・ボタン・バナーの角丸を一括管理 */
  --radius: 8px;

  /* ゴールド変数群 → 森と生成りのボタニカル系に変更（依頼人フィードバック⑥、2026-07-08） */
  --c-gold-1: #2F3D2A;   /* フォレスト（旧ゴールド濃色）・営業時間・サブテキスト */
  --c-gold-2: #8FA37E;   /* セージ（旧ゴールド中濃色）・area-title 背景 */
  --c-gold-3: #7A9268;   /* セージ濃め・装飾帯 */
  --c-gold-4: #6B4A2E;   /* ウォルナット・カードborder・区切り線 */
  --c-gold-5: #F2ECDF;   /* アイボリー・薄色背景 */

  --f-disp: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  --f-body: 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  color: var(--c-text);
  background-color: var(--c-base);
  background-image: url('images/bg_wood_botanical_pc.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  line-height: 1.6;
  font-size: 15px;
  padding-bottom: 125px; /* PC固定バー高さ（500x125/250x125/250x125、幅1000px時に確定） */
  overflow-x: hidden;
}
@media (max-width: 768px) {
  body {
    background-image: url('images/bg_wood_botanical_sp.jpg');
    background-attachment: scroll; /* fixedはモバイルで不安定・重くなりやすいため */
  }
}
a { color: inherit; text-decoration: none; }

/* ---- プレースホルダー ---- */
.ph {
  background: var(--ph-bg);
  color: var(--ph-fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: .05em;
  border: 1px solid var(--c-line);
}

/* ============ 角丸（依頼人フィードバック⑤） ============
   写真・ボタン・バナー系の画像/カードに一括適用。丸型・ピル型（アバター・ドット・タグバッジ等）は対象外。
   新規で写真/ボタン/バナー画像classを追加した場合はここに追記する。 */
.mainvisual-img,
.t-img,
.t-card,
.sns-banner-img,
.content-banner-img,
.side-banner-img,
.gallery-fader,
.fbar-pc-btn img,
.fbar-sp-btn img,
.rbtn img,
.footer-reserve-btn img,
.profile-photo img.ph-main,
.profile-gallery-img,
.about-body .ph-half,
.about-body .wp-block-image.about-hero-img img,
.about-body .wp-block-image.about-half-img img,
.news-article .ph-news {
  border-radius: var(--radius);
}

/* ============ HEADER ============ */
.site-header { background: transparent; } /* バナー左右の余白に木目+ボタニカル背景を透過表示。.header-subは個別に白背景を維持 */
.header-banner { display: block; line-height: 0; max-width: var(--container); margin: 0 auto; overflow: hidden; }
.header-banner img { width: 100%; height: auto; display: block; }
.ph-header-banner { width: 100%; height: 140px; font-size: 14px; }
.header-sub {
  background: var(--c-paper);
  max-width: var(--container); margin: 0 auto; padding: 4px 0;
}
.catch-sub { font-size: 20px; color: var(--c-gold-1); text-align: center; padding: 10px; }

/* ============ GLOBAL NAV ============ */
.gnav { background: transparent; } /* 全幅の赤帯を削除、背景の木目+ボタニカルを透過表示 */
.gnav--sp { display: none; }          /* SP nav: hidden by default, shown at ≤768px */
.gnav-list {
  max-width: var(--container); margin: 0 auto;
  list-style: none; display: flex;
}
.gnav--sp .gnav-list { max-width: 100%; }
.gnav-list li  { flex: 1; }
.gnav-list a   { display: block; line-height: 0; }
.gnav-list img { width: 100%; height: auto; display: block; }


/* ============ CONTAINER ============ */
.container {
  max-width: var(--container); margin: 0 auto;
  display: flex; gap: var(--gap);
  padding: 24px 0 120px;
}
.main-col { width: var(--main-w); flex: none; }
.side-col  { width: var(--side-w); flex: none; }

/* ============ MAIN VISUAL ============ */
.mainvisual { margin-bottom: 18px; line-height: 0; }
.mainvisual-img { width: 100%; height: auto; display: block; }

/* ============ SECTION ============ */
.block {
  background: var(--c-paper); padding: 18px; margin-bottom: 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.sec-title {
  font-family: var(--f-disp); font-size: 22px; font-weight: normal;
  text-align: center; color: var(--c-text);
  padding-bottom: 10px; margin-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}
.sec-title .sec-sub {
  display: block; font-family: var(--f-body); font-size: 12px;
  color: var(--c-sub); letter-spacing: .2em; margin-top: 4px;
}
.sec-title--sm {
  font-family: var(--f-body); font-size: 16px; color: var(--c-accent);
  background: var(--c-base); padding: 8px; border-bottom: none;
}

/* ============ INFORMATION ============ */
.info-box {
  border: 1px solid var(--c-gold-4);
  box-shadow: inset 0 0 0 4px var(--c-gold-5);
  padding: 18px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--c-paper);
}
.info-row  { font-size: 14px; margin-bottom: 8px; }
.info-date { color: var(--c-accent); font-weight: bold; margin-right: 10px; }
.info-list { list-style: none; }
.info-list li { font-size: 14px; padding: 5px 0; border-bottom: 1px dotted var(--c-line); }

/* ============ THERAPIST GRID ============ */
.therapist-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
}
.t-card { border: 1px solid var(--c-gold-4); padding: 4px; background: #f6f2f1; position: relative; }
.t-photo { position: relative; display: block; }
.ph-card { width: 100%; aspect-ratio: 3/4; }
.t-img   { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; }
.t-name  { font-size: 21px; font-weight: bold; text-align: center; margin-top: 4px; }
.t-size  { font-size: 13px; color: var(--c-sub); text-align: center; }
.t-room  { font-size: 12px; color: var(--c-sub); text-align: center; margin-top: 4px; }
.more-btn {
  display: block; width: 80%; margin: 12px auto 0;
  text-align: center; padding: 20px;
  background: var(--c-accent); color: #fff;
  font-size: 25px; font-weight: bold;
  border-radius: 0; cursor: pointer; text-decoration: none;
}

/* ============ AREA TITLE ============ */
.area-title {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 26px; font-weight: bold;
  background: var(--c-gold-2); color: var(--c-accent2);
  padding: 5px 15px; margin: 16px 0 30px;
}
.area-title-icon { width: 20px; height: auto; opacity: 0.85; }

/* ============ RANK BADGE ============ */
.rank-badge {
  position: absolute; top: 4px; left: 4px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--c-accent2); color: #fff;
  font-size: 13px; font-weight: bold;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}

/* ============ CARD BADGES ============ */
.t-new-inline { height: 1em; width: auto; vertical-align: middle; margin-right: 3px; }

/* ============ 出勤コーナーリボン・外国人歓迎バッジ（CSSのみ） ============ */
/* 外側：写真の角にぴったり重ねるクリップ用の正方形（overflow:hiddenで直角三角形に切り出す） */
.corner-ribbon-wrap {
  position: absolute; top: 0; right: 0; overflow: hidden; z-index: 3; pointer-events: none;
}
.corner-ribbon-wrap--sm { width: 58px;  height: 58px; }
.corner-ribbon-wrap--lg { width: 130px; height: 130px; }

/* 三角形本体：正方形をwrapperの右上角を中心に45度回転→wrapperの外にはみ出た分はoverflowで切れ、
   角に直角が来る直角三角形だけが残る（対角線 = 正方形の一辺） */
.corner-ribbon-shape { position: absolute; background: var(--c-accent2); transform: rotate(45deg); }
.corner-ribbon-wrap--sm .corner-ribbon-shape { width: 82px;  height: 82px;  top: -41px; left: 17px; }
.corner-ribbon-wrap--lg .corner-ribbon-shape { width: 184px; height: 184px; top: -92px; left: 38px; }

/* 文字：三角形の重心付近に、斜辺に沿わせて斜め45度で配置 */
.corner-ribbon-label {
  position: absolute; color: #fff; font-weight: bold; white-space: nowrap;
  transform: rotate(45deg);
}
.corner-ribbon-wrap--sm .corner-ribbon-label { top: 12px; right: 7px;  font-size: 16px; line-height: 1; }
.corner-ribbon-wrap--lg .corner-ribbon-label { top: 32px; right: 22px; font-size: 25px; line-height: 1; }

.foreign-badge {
  position: absolute; z-index: 3; pointer-events: none;
  background: var(--c-gold-2); color: var(--c-accent2); font-weight: bold;
  border-radius: 3px; letter-spacing: .5px; white-space: nowrap;
}
.foreign-badge--sm { bottom: 4px; right: 4px; font-size: 8.5px; padding: 2px 6px; }
.foreign-badge--lg { bottom: 8px; right: 8px; font-size: 11px; padding: 4px 10px; }

/* タグ内インラインアイコン（icon_time） */
.t-icon { width: 14px; height: 14px; vertical-align: middle; margin-right: 3px; }

/* ============ 出勤時間帯バー・最短案内/満了バー ============ */
.t-shift-bar {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--c-gold-1); color: #fff; font-size: 12px;
  padding: 4px 0; margin-top: 4px;
}
.t-status-band {
  text-align: center; font-size: 12px; font-weight: bold; color: #fff; padding: 4px 0;
}
.t-status-band--open { background: var(--c-accent); }
.t-status-band--full { background: #888; }

/* ============ SNS ============ */
.sns-card  { border: 1px solid var(--c-line); padding: 14px; }
.sns-head  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ph-avatar { width: 40px; height: 40px; border-radius: 50%; }
.sns-name  { font-size: 14px; font-weight: bold; }
.sns-name span { font-size: 12px; color: var(--c-sub); font-weight: normal; }
.sns-text  { font-size: 14px; margin-bottom: 10px; }
.ph-sns-img { width: 100%; height: 240px; }
.sns-banner-img { width: 100%; height: auto; display: block; }
.sns-foot  { font-size: 13px; color: var(--c-sub); text-align: center; margin-top: 8px; }

/* ============ GALLERY（白経由フェード・素のJS） ============ */
.gallery-fader { position: relative; width: 100%; aspect-ratio: 4/3; background: #fff; overflow: hidden; }
.gallery-fader-track { position: relative; width: 100%; height: 100%; }
.gallery-fade-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s ease; display: block;
}
.gallery-fade-slide.is-active { opacity: 1; }

.gallery-fader-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.85); color: var(--c-accent);
  font-size: 20px; line-height: 1; cursor: pointer; z-index: 4;
}
.gallery-fader-arrow--prev { left: 10px; }
.gallery-fader-arrow--next { right: 10px; }

.gallery-fader-dots {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 4;
  display: flex; justify-content: center; gap: 6px;
}
.gallery-fader-dot {
  width: 8px; height: 8px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.6); cursor: pointer; padding: 0;
}
.gallery-fader-dot.is-active { background: var(--c-accent); }

.swiper-mainvisual .swiper-pagination-bullet-active { background: var(--c-accent); }

/* ============ RESERVED ============ */
.reserve-lead { font-size: 14px; margin-bottom: 14px; }
.bnr-tel-wrap { position: relative; line-height: 0; margin-bottom: 14px; }
.bnr-tel-link { display: block; position: relative; line-height: 0; }
.bnr-tel-link img { width: 100%; height: auto; display: block; }
.bnr-tel-num { position: absolute; inset: 0; color: transparent; font-size: 1px; cursor: pointer; }
.reserve-btns { display: flex; gap: 10px; margin-top: 12px; }
.rbtn { flex: 1; display: block; line-height: 0; }
.rbtn img { width: 100%; height: auto; display: block; }

/* ============ STORE TABLE ============ */
.store-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.store-table th,
.store-table td { border: 1px solid var(--c-line); padding: 8px; text-align: left; }
.store-table th { width: 120px; background: var(--c-base); color: var(--c-accent); font-weight: bold; }

/* ============ CONTENT BANNERS（738×180） ============ */
.content-banners { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.content-banner-img { width: 100%; height: auto; max-width: 738px; display: block; }

/* ============ SIDEBAR ============ */
.side-logo-link { display: block; margin-bottom: 8px; }
.text-logo {
  display: block;
  font-family: var(--f-disp);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--c-accent);
  text-align: center;
  line-height: 1.3;
}
.side-banner-wrap { margin-bottom: 8px; line-height: 0; }
.side-banner-wrap a { display: block; line-height: 0; }
.side-banner-img    { width: 100%; height: auto; display: block; }

/* ============ FOOTER ============ */
.site-footer { background: var(--c-accent2); color: #fff; text-align: center; padding: 20px; }

/* フッター予約ボタン */
.footer-reserve {
  display: flex; justify-content: center; gap: 12px; margin-bottom: 16px;
}
.footer-reserve-btn { display: block; line-height: 0; max-width: 300px; }
.footer-reserve-btn img { width: 100%; height: auto; display: block; }
/* WEB予約削除によりLINE予約のみになった場合、空いた分だけ幅を拡大 */
.footer-reserve-btn:only-child { max-width: 500px; }

/* フッターサイトマップ */
.footer-map {
  max-width: var(--container); margin: 0 auto 14px; padding-bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.footer-map a { color: #fff; font-size: 13px; opacity: .85; }
.footer-map a:hover { opacity: 1; }
.copy { font-size: 13px; }

/* ============ FIXED BAR ============ */
.fixed-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }

/* PC版: 3点横並び（電話500 / LINE250 / WEB250、合計1000pxでグローバルナビ幅と一致）
   高さはaspect-ratioで固定し、実画像の縦横比が想定とズレてもobject-fit:coverで
   吸収する（3ボタンの高さが必ず揃う）。整数比：電話4:1・LINE/WEB各2:1。 */
.fbar-pc     { display: flex; max-width: var(--container); margin: 0 auto; line-height: 0; }
.fbar-pc-btn { flex: 250; display: block; position: relative; line-height: 0; aspect-ratio: 250 / 125; }
.fbar-pc-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fbar-pc-tel  { flex: 500; aspect-ratio: 500 / 125; }
/* WEB予約削除分の幅を吸収して電話ボタンと同じ50/50に拡大（高さ125は維持） */
.fbar-pc-line { flex: 500; aspect-ratio: 500 / 125; }
/* 電話番号テキスト: 画像に重ねた透明レイヤー。color を #fff 等に変えれば可視化可 */
.fbar-tel-num {
  position: absolute; inset: 0;
  color: transparent; font-size: 1px; cursor: pointer;
}

/* SP版: 非表示（デフォルト）。PC同様、aspect-ratio固定+object-fit:coverで高さを揃える
   整数比：電話4:1（600x150）・LINE/WEB各2:1（300x150）。幅シェアは電話:LINE:WEB=2:1:1を維持 */
.fbar-sp { display: none; }
.fbar-sp-btn { flex: 1; display: block; position: relative; line-height: 0; aspect-ratio: 300 / 150; }
.fbar-sp-btn > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fbar-sp-tel { flex: 2; aspect-ratio: 600 / 150; }
/* WEB予約削除分の幅を吸収して電話ボタンと同じ50/50に拡大（高さ150は維持） */
.fbar-sp-line { flex: 2; aspect-ratio: 600 / 150; }

/* ============================================================
   sub.css — 下層ページ追加スタイル
   ============================================================ */

/* パンくず */
.breadcrumb {
  max-width: var(--container); margin: 0 auto; padding: 10px 0;
  font-size: 13px; color: var(--c-sub);
}
.breadcrumb a    { color: var(--c-accent); }
.breadcrumb span { margin: 0 6px; }

/* ページ見出し（背景が暗い木目画像のため、明るい文字色+text-shadowでコントラスト確保） */
.page-head { text-align: center; padding: 8px 0 20px; }
.page-head h1 {
  font-family: var(--f-disp); font-size: 28px; font-weight: normal; color: var(--c-gold-5);
  text-shadow: 0 2px 8px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5);
}
.page-head .ja {
  display: block; font-size: 13px; color: rgba(242,236,223,.75); letter-spacing: .2em; margin-top: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5);
}

/* 絞り込みバー */
.filter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.filter-bar a {
  font-size: 13px; padding: 6px 12px; border: 1px solid var(--c-line);
  background: #fff; border-radius: 3px; color: var(--c-text);
}
.filter-bar a.is-active { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* ページネーション */
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.pager a {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line); background: #fff; font-size: 14px; border-radius: 3px;
}
.pager a.is-active,
.pager span.current {
  background: var(--c-accent); color: #fff; border-color: var(--c-accent);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; border-radius: 3px;
}

/* セラピスト個別（縦積みレイアウト） */
.profile-photo { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.profile-photo .ph-main { width: 100%; height: auto; aspect-ratio: 3/4; }
.profile-photo img.ph-main { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; }

.profile-gallery { display: flex; gap: 6px; margin-top: 8px; }
.profile-gallery-item {
  flex: none; width: 72px; height: 72px; overflow: hidden;
  border: 1px solid var(--c-gold-4); cursor: pointer;
  opacity: .5; transition: opacity .2s;
}
.profile-gallery-item.is-active { opacity: 1; }
.profile-gallery-img  { width: 100%; height: 100%; object-fit: cover; display: block; }

.profile-name-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.profile-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.profile-name  { font-size: 24px; font-weight: bold; }
.profile-name small { font-size: 14px; color: var(--c-sub); font-weight: normal; margin-left: 8px; }
.profile-size  { font-size: 15px; color: var(--c-accent); margin: 8px 0 14px; font-weight: bold; }
.profile-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
.profile-table th,
.profile-table td { border: 1px solid var(--c-line); padding: 7px 9px; text-align: left; }
.profile-table th  { width: 90px; background: var(--c-base); color: var(--c-accent); }

/* セラピスト個別SNS（詳細ページのみ） */
.profile-sns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.profile-sns-icon {
  display: block; width: 40px; height: 40px; padding: 4px; box-sizing: border-box;
  border: 1px solid var(--c-gold-3); border-radius: 50%; background: #fff;
}
.profile-sns-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

.meta-profile-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.meta-profile-table td {
  background: #5C7350; color: #fff; padding: 8px 14px; /* gold-3のセージよりコントラスト確保のため一段濃く指定 */
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.meta-profile-table tr:last-child td { border-bottom: none; }

/* 料金システム */
.price-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 20px; }
.price-table th,
.price-table td { border: 1px solid var(--c-line); padding: 10px; text-align: center; }
.price-table thead th { background: var(--c-accent); color: #fff; }
.price-table th:first-child { background: var(--c-base); color: var(--c-accent); }
.price-table-group td { background: var(--c-accent); color: #fff; font-weight: bold; }
.price-note { font-size: 13px; color: var(--c-sub); margin-bottom: 24px; }
.price-notes-list { font-size: 13px; color: var(--c-sub); margin: 8px 0 0; padding-left: 18px; }
.price-notes-list li { margin-bottom: 4px; }
.option-list { list-style: none; }
.option-list li {
  display: flex; justify-content: space-between; font-size: 15px;
  padding: 9px 4px; border-bottom: 1px dotted var(--c-line);
}
.option-list li .price { color: var(--c-accent); font-weight: bold; }

/* アクセス */
.access-map   { width: 100%; height: 300px; margin-bottom: 16px; }
.access-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.access-table th,
.access-table td { border: 1px solid var(--c-line); padding: 10px; text-align: left; }
.access-table th  { width: 120px; background: var(--c-base); color: var(--c-accent); }

/* 求人 */
.recruit-hero  { width: 100%; height: 240px; margin-bottom: 20px; object-fit: cover; }
.recruit-lead  { font-size: 16px; text-align: center; margin-bottom: 20px; line-height: 1.9; }
.recruit-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 20px; }
.recruit-table th,
.recruit-table td { border: 1px solid var(--c-line); padding: 10px; text-align: left; }
.recruit-table th  { width: 130px; background: var(--c-base); color: var(--c-accent); }
.recruit-table td  { white-space: pre-line; }
.recruit-cta {
  text-align: center; padding: 20px; background: var(--c-accent); color: #fff; border-radius: 6px;
}
.recruit-cta .big { font-size: 24px; font-weight: bold; margin-top: 6px; }

/* コンセプト */
.concept-hero  { width: 100%; height: 280px; margin-bottom: 24px; }
.about-body h3 { font-size: 18px; color: var(--c-accent); text-align: center; margin: 28px 0 10px; }
.about-body p  { font-size: 15px; line-height: 1.9; }
.about-body .ph-half { width: 100%; height: 180px; margin: 14px 0; }
.about-body .wp-block-image.about-hero-img { margin: 0 0 24px; }
.about-body .wp-block-image.about-hero-img img { width: 100%; height: 280px; object-fit: cover; display: block; }
.about-body .wp-block-image.about-half-img { margin: 14px 0; }
.about-body .wp-block-image.about-half-img img { width: 100%; height: 180px; object-fit: cover; display: block; }

/* お知らせ一覧 */
.news-list { list-style: none; }
.news-list li { border-bottom: 1px solid var(--c-line); }
.news-list a { display: flex; gap: 14px; padding: 12px 4px; align-items: baseline; }
.news-date { color: var(--c-accent); font-size: 14px; font-weight: bold; flex: none; }
.news-cat  { font-size: 12px; background: var(--c-base); padding: 2px 8px; border-radius: 2px; flex: none; }
.news-ttl  { font-size: 15px; }

/* お知らせ詳細 */
.news-article h1    { font-size: 20px; margin-bottom: 6px; }
.news-article .meta { font-size: 13px; color: var(--c-sub); margin-bottom: 16px; }
.news-article .ph-news { width: 100%; height: 240px; margin: 14px 0; }
.news-article p { font-size: 15px; line-height: 1.9; margin-bottom: 12px; }

/* お問い合わせ */
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 14px; font-weight: bold; margin-bottom: 5px; }
.form-row label .req { color: var(--c-accent); font-size: 12px; margin-left: 6px; }
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%; padding: 9px; border: 1px solid var(--c-line); border-radius: 3px; font-size: 15px;
  font-family: inherit; background: #fff;
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-submit {
  display: block; width: 100%; padding: 14px; background: var(--c-accent); color: #fff;
  border: none; border-radius: 6px; font-size: 17px; font-weight: bold; cursor: pointer; margin-top: 8px;
}
.form-line { text-align: center; margin-top: 16px; }
.form-line a {
  display: inline-block; padding: 12px 30px; background: #06c755; color: #fff;
  border-radius: 6px; font-weight: bold;
}

/* 外国人向け（共通ベース） */
.en-block { margin-bottom: 20px; }
.en-block h3 {
  font-size: 17px; color: var(--c-accent); margin-bottom: 8px;
  border-bottom: 1px solid var(--c-line); padding-bottom: 5px;
}
.en-block p { font-size: 15px; line-height: 1.8; margin-bottom: 10px; }

/* ============================================================
   外国人向けページ（page-foreigner.php）固有スタイル
   ============================================================ */

/* ---- セクション1: FGN WELCOME バッジ ---- */
.fgn-badge {
  text-align: center;
  padding: 4px 0 24px;
}
.fgn-badge img {
  width: 120px;
  height: auto;
  display: inline-block;
}

/* ---- セクション1: ページ見出し（foreigner 固有） ---- */
.page-foreigner .page-head h1 {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ 明朝", serif;
  color: var(--c-gold-5);
  text-shadow: 0 2px 8px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5);
  font-size: 30px;
}
.page-foreigner .page-head .ja {
  color: rgba(242,236,223,.75);
  text-shadow: 0 2px 8px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5);
  border-bottom: 1px solid rgba(242,236,223,.4);
  padding-bottom: 10px;
  display: block;
  margin-top: 6px;
}

/* ---- セクション2: en-block 見出し（ダイヤアイコン + 金系スタイル） ---- */
.block--foreigner .en-block h3 {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ 明朝", serif;
  font-size: 20px;
  color: var(--c-accent2);
  border-bottom: 1px solid var(--c-accent2);
  padding-bottom: 8px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.block--foreigner .en-block h3::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url('images/icon_diamond.png') no-repeat center / contain;
  flex: none;
  opacity: 0.75;
}

/* ---- セクション2: 本文 ---- */
.block--foreigner .en-block p {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ 明朝", serif;
  line-height: 1.9;
}

/* ---- セクション3: コースリスト テーブル ---- */
.block--foreigner .price-table thead th {
  background: var(--c-accent2);
}
.block--foreigner .price-table th:first-child {
  background: #f6f2f1;
  color: var(--c-accent2);
}

/* ---- セクション4: LINE ボタン（foreigner 固有） ---- */
.form-line--foreigner a {
  border-radius: 0;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ 明朝", serif;
  font-size: 17px;
  padding: 14px 48px;
  letter-spacing: 0.05em;
}

/* ---- foreigner レスポンシブ（768px 以下） ---- */
@media (max-width: 768px) {
  .fgn-badge img {
    width: 90px;
  }
  .block--foreigner .en-block h3 {
    font-size: 17px;
    gap: 8px;
  }
  .block--foreigner .en-block h3::before {
    width: 18px;
    height: 18px;
  }
  .form-line--foreigner a {
    padding: 14px 24px;
    font-size: 15px;
  }
}

/* ============ SP HAMBURGER / DRAWER ============ */

/* ハンバーガーボタン（PCでは非表示、768px 以下で右上固定） */
.sp-menu-btn {
  display: none;
  position: fixed; top: 12px; right: 12px; z-index: 300;
  background: var(--c-accent2); border: none; cursor: pointer;
  width: 44px; height: 44px; padding: 8px; border-radius: 4px;
  flex-direction: column; justify-content: space-between; align-items: center;
}
.sp-menu-btn span {
  display: block; width: 100%; height: 3px;
  background: #fff; border-radius: 2px;
  transition: transform .3s, opacity .3s;
  transform-origin: center;
}

/* ×アニメ */
.sp-menu-btn.aroma-btn-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.sp-menu-btn.aroma-btn-open span:nth-child(2) { opacity: 0; }
.sp-menu-btn.aroma-btn-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* オーバーレイ */
.sp-drawer-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 290;
  background: rgba(0,0,0,.5);
}
.sp-drawer-overlay.aroma-overlay-open { display: block; }

/* ドロワー本体 */
.sp-drawer {
  position: fixed; top: 0; right: 0; z-index: 295;
  width: 280px; height: 100%;
  background: var(--c-accent2); color: #fff;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s ease;
  padding: 16px;
}
.sp-drawer.aroma-drawer-open { transform: translateX(0); }

/* 閉じるボタン */
.sp-drawer-close {
  background: none; border: none; color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer;
  position: absolute; top: 10px; right: 14px;
}

/* ロゴ */
.sp-drawer-logo { text-align: center; margin: 40px 0 20px; }
.sp-drawer-logo .text-logo { color: #fff; font-size: 20px; }

/* メニューリスト */
.sp-drawer-nav { list-style: none; margin-bottom: 20px; }
.sp-drawer-nav li { border-bottom: 1px solid rgba(255,255,255,.3); }
.sp-drawer-nav a {
  display: block; padding: 12px 8px;
  color: #fff; font-size: 15px; text-decoration: none;
}

/* 電話番号 */
.sp-drawer-tel { text-align: center; margin-bottom: 10px; }
.sp-drawer-tel a { color: #fff; font-size: 18px; font-weight: bold; }

/* 営業時間 */
.sp-drawer-hours {
  text-align: center; font-size: 12px; line-height: 1.7;
  color: rgba(255,255,255,.85);
}

/* ============================================================
   レスポンシブ（768px 以下）
   ============================================================ */
@media (max-width: 768px) {
  /* ハンバーガーボタン表示 */
  .sp-menu-btn { display: flex; }
  .container { max-width: 100%; padding-left: 10px; padding-right: 10px; }
  .header-sub { padding-left: 10px; padding-right: 10px; }
  .container      { flex-direction: column; }
  .main-col { width: 100%; }
  .side-col { display: none; }
  /* ナビ切替 */
  .gnav--pc { display: none; }
  .gnav--sp { display: block; }
  .gnav--sp .gnav-list { flex-wrap: wrap; }
  .gnav--sp .gnav-list li { flex: 0 0 25%; } /* 4列 × 2行 */
  /* 固定バー切替 */
  .fbar-pc { display: none; }
  .fbar-sp { display: flex; }
  /* SP固定バー分のスクロール余白（幅可変のため目安値。電話4:1/LINE・WEB各2:1で幅の1/8が高さ目安） */
  body { padding-bottom: 55px; }
  /* 営業時間テキスト SP縮小 */
  .catch-sub { font-size: 14px; }
  /* その他 */
  .therapist-grid { grid-template-columns: repeat(2,1fr); }
  .ph-mv          { height: 180px; }
}