@charset "UTF-8";
/*!
 * seven-pages.css — 固定ページ共通（Phase D: 骨組みのみ）
 * ===========================================================================
 * 作成: 2026-09-02 (STEP3 Phase D)
 * 依存: seven-tokens.css
 *
 * 【現状】
 * スタイル宣言なし。Phase D では見た目を一切変更しません。
 *
 * 【役割】
 * page-seven-service.php 系テンプレートで使う固定ページのレイアウト。
 *
 * 【将来管理する既定ページ（slug）】
 *   mens / ladies / eyelash / beauty-care / price / first-visit
 *
 * 【拡張方針 — ページが増えても壊れない構造にする】
 * ページ固有の見た目は「テンプレート名」ではなく
 * 「ルート要素に付けたモディファイアクラス」で切り替える。
 *
 *   共通:   .seven-page { ... }
 *   個別:   .seven-page--mens / --ladies / --eyelash / --beauty-care
 *           .seven-page--price / --first-visit
 *
 * この形なら、将来
 *   - 店販商品案内
 *   - 商品詳細
 *   - 店舗おすすめ商品
 *   - オンライン注文案内
 * といったページが増えても、.seven-page--<slug> を1つ足すだけで済み、
 * 既存ページのCSSに触れる必要がない。
 *
 * WordPress が自動付与する body.page-id-123 には依存しない。
 * （ページIDは環境ごとに変わり、ステージングと本番でズレるため）
 *
 * 【価格情報の扱い】
 * /price/ の料金は TablePress（12テーブル）を単一ソースとする方針。
 * このCSSは TablePress が出力するテーブルの「見た目」だけを担当し、
 * 価格の値そのものをCSSやテンプレートに持たせない。
 * ===========================================================================
 */

/* ===========================================================================
   Phase F1: サービス系固定ページ 共通実装 ＋ 料金ページ
   スコープは .seven-page（page-seven-service.php が出力するルート要素）。
   HOME用の body.home スコープには一切影響しない。
   トークンは seven-tokens.css のものだけを使う（新しい色を増やさない）。
   !important は使わない。
   =========================================================================== */

/* --- Cocoonのカラム枠をサービスページでのみ解除 ------------------------------
   Cocoon DOM: #content > #content-in.wrap > (main#main + #sidebar)
   .main 860px / .sidebar 376px では 1180px コンテナが成立しないため、
   このテンプレートを使うページに限り全幅化しサイドバーを隠す。
   .seven-page は page-seven-service.php でのみ出力されるため、
   通常の固定ページ・記事・カテゴリーには影響しない。
   ------------------------------------------------------------------------ */
body:has(.seven-page) #content-in.wrap { width: auto; max-width: none; margin: 0; padding: 0; }
body:has(.seven-page) #main.main {
  width: 100%; max-width: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: var(--seven-bg); box-shadow: none;
  overflow-x: hidden;
}
body:has(.seven-page) #sidebar { display: none; }
body:has(.seven-page) #content { margin-top: 0; padding-top: 0; }

/* :has() 非対応ブラウザ向けのフォールバック（テンプレート由来のbodyクラス） */
body.page-template-page-seven-service #content-in.wrap { width: auto; max-width: none; margin: 0; padding: 0; }
body.page-template-page-seven-service #main.main {
  width: 100%; max-width: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: var(--seven-bg); box-shadow: none;
  overflow-x: hidden;
}
body.page-template-page-seven-service #sidebar { display: none; }

/* --- 基本 ---------------------------------------------------------------- */
.seven-page {
  font-family: var(--seven-font);
  font-size: var(--seven-fs-body);
  line-height: var(--seven-lh-body);
  color: var(--seven-text);
  background: var(--seven-bg);
}
.seven-page img { max-width: 100%; height: auto; }

.seven-page .seven-container {
  width: 100%;
  max-width: var(--seven-container);
  margin-inline: auto;
  padding-inline: var(--seven-gutter);
  box-sizing: border-box;
}
.seven-page .seven-section { padding-block: var(--seven-section-y); }

.seven-page .seven-eyebrow {
  margin: 0 0 10px;
  font-size: var(--seven-fs-small);
  letter-spacing: .08em;
  color: var(--seven-primary);
}
.seven-page .seven-h2 {
  margin: 0 0 12px;
  font-size: var(--seven-fs-h2);
  font-weight: 700;
  line-height: 1.4;
}
.seven-page .seven-section__lead {
  margin: 0 0 28px;
  color: var(--seven-text-muted);
}
.seven-page .seven-badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 10px;
  border-radius: var(--seven-radius-pill);
  background: var(--seven-primary-soft);
  color: var(--seven-primary);
  font-size: 12px;
  font-weight: 700;
}

/* --- 01 HERO / INTRO ----------------------------------------------------- */
.seven-page .seven-page-hero { padding-block: 40px 8px; }
.seven-page .seven-page-hero__title {
  margin: 0 0 16px;
  font-size: var(--seven-fs-h1);
  font-weight: 700;
  line-height: 1.3;
}
.seven-page .seven-page-hero__lead { margin: 0; color: var(--seven-text-muted); }

/* --- 02 QUICK NAV -------------------------------------------------------- */
.seven-page .seven-quicknav-section { padding-block: 20px 8px; }
.seven-page .seven-quicknav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.seven-page .seven-quicknav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;             /* 44px のタップ領域を超える */
  padding: 8px 12px;
  border: var(--seven-border-w) solid var(--seven-border);
  border-radius: var(--seven-radius);
  background: var(--seven-surface);
  color: var(--seven-primary-dark);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.seven-page .seven-quicknav__link:hover {
  background: var(--seven-primary-soft);
  border-color: var(--seven-primary);
}
.seven-page .seven-quicknav__label { font-size: 16px; line-height: 1.3; }
.seven-page .seven-quicknav__sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--seven-text-muted);
}

/* --- 03〜06 料金セクション ------------------------------------------------ */
.seven-page .seven-price-section { scroll-margin-top: 24px; }

.seven-page .seven-price-block {
  margin-top: 20px;
  padding: 18px 16px;
  border: var(--seven-border-w) solid var(--seven-border);
  border-radius: 14px;
  background: var(--seven-surface);
  box-shadow: var(--seven-shadow);
}
.seven-page .seven-price-block__title {
  margin: 0 0 10px;
  font-size: var(--seven-fs-h3);
  font-weight: 700;
  line-height: 1.4;
  color: var(--seven-primary-dark);
}
.seven-page .seven-price-block__note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--seven-text-muted);
}

/* 料金表本体：メニュー名は折り返し、価格列は詰めすぎない */
.seven-page .seven-price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  table-layout: auto;
}
.seven-page .seven-price-table tr {
  border-bottom: var(--seven-border-w) solid var(--seven-border);
}
.seven-page .seven-price-table tr:last-child { border-bottom: 0; }
.seven-page .seven-price-table__name {
  padding: 12px 12px 12px 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;      /* 長いメニュー名を折り返す */
  word-break: normal;
}
.seven-page .seven-price-table__price {
  padding: 12px 0;
  min-width: 6.5em;             /* 価格列を極端に狭くしない */
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 700;
  color: var(--seven-primary-dark);
}

/* --- 休止などのお知らせ --------------------------------------------------- */
.seven-page .seven-notice {
  margin-top: 20px;
  padding: 18px 16px;
  border: var(--seven-border-w) solid var(--seven-border);
  border-left: 4px solid var(--seven-accent);
  border-radius: 14px;
  background: var(--seven-accent-soft);
}
.seven-page .seven-notice__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--seven-text);
}
.seven-page .seven-notice__text { margin: 0; font-size: 15px; color: var(--seven-text); }

/* --- 07 料金注記 --------------------------------------------------------- */
.seven-page .seven-price-notes { background: var(--seven-surface); }
.seven-page .seven-notes-list {
  margin: 0;
  padding-left: 1.2em;
  color: var(--seven-text-muted);
}
.seven-page .seven-notes-list li { margin-bottom: 8px; line-height: 1.8; }
.seven-page .seven-notes-list li:last-child { margin-bottom: 0; }

/* --- ボタン（HOMEと同じデザイン言語） -------------------------------------- */
.seven-page .seven-btn-group {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px;
}
.seven-page .seven-btn-group--center { justify-content: center; }
.seven-page .seven-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--seven-btn-h);
  padding: 0 28px;
  border: var(--seven-border-w) solid transparent;
  border-radius: var(--seven-radius-pill);
  font-size: 16px; font-weight: 700; line-height: 1.4;
  text-align: center; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.seven-page .seven-btn--line { background: var(--seven-line); color: #fff; }
.seven-page .seven-btn--line:hover { background: var(--seven-line-dark); }
.seven-page .seven-btn--on-primary {
  background: transparent; border-color: rgba(255, 255, 255, .8); color: #fff;
}
.seven-page .seven-btn--on-primary:hover { background: rgba(255, 255, 255, .12); }

.seven-page a:focus-visible,
.seven-page .seven-btn:focus-visible,
.seven-page .seven-quicknav__link:focus-visible {
  outline: 3px solid var(--seven-accent);
  outline-offset: 2px;
}

/* --- 08 FINAL CTA -------------------------------------------------------- */
.seven-page .seven-final-cta { background: var(--seven-primary); color: #fff; }
.seven-page .seven-final-cta__inner { text-align: center; }
.seven-page .seven-final-cta__title { color: #fff; margin-bottom: 16px; }
.seven-page .seven-final-cta__lead { margin: 0; color: rgba(255, 255, 255, .88); }

/* --- header / footer をサービスページでもブランドトーンに馴染ませる ---------
   HOME用の body.home スコープは流用せず、このテンプレート専用に指定する。
   footer ウィジェットの扱いは料金ページの重複状況を見て別途判断するため、
   ここでは配色のみ合わせ、ウィジェットは消していない。
   ------------------------------------------------------------------------ */
body.page-template-page-seven-service #header,
body.page-template-page-seven-service #header-in.header-in { background: var(--seven-surface); }
body.page-template-page-seven-service .logo-text { padding: 12px 0; }
body.page-template-page-seven-service #header .logo .site-name-text {
  font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--seven-primary-dark);
}
body.page-template-page-seven-service #header-container .navi,
body.page-template-page-seven-service #navi {
  background: var(--seven-surface);
  border-bottom: var(--seven-border-w) solid var(--seven-border);
}
body.page-template-page-seven-service #header-container .navi a,
body.page-template-page-seven-service #navi .menu-header a {
  background: transparent; color: var(--seven-primary-dark);
}
body.page-template-page-seven-service .navi-in > ul li { height: 48px; }
body.page-template-page-seven-service .navi-in > ul .menu-item-has-description > a > .caption-wrap {
  height: 48px; line-height: 22px;
}
body.page-template-page-seven-service.custom-background,
body.page-template-page-seven-service {
  background-image: none;
  background-color: var(--seven-bg);
}
body.page-template-page-seven-service .page-top,
body.page-template-page-seven-service .page-top a { display: none; }

@media (max-width: 767px) {
  body.page-template-page-seven-service .logo-text { padding: 10px 0; }
  body.page-template-page-seven-service #header .logo .site-name-text { font-size: 17px; }
}

/* --- 動きの抑制 ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .seven-page * { transition: none; animation: none; }
}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (min-width: 768px) {
  .seven-page .seven-quicknav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .seven-page .seven-price-block { padding: 24px 22px; margin-top: 24px; }
  .seven-page .seven-price-table__name { font-size: 16px; padding-right: 24px; }
  .seven-page .seven-price-table__price { font-size: 17px; min-width: 7em; }
  .seven-page .seven-page-hero { padding-block: 56px 8px; }
  .seven-page .seven-price-section { padding-block: calc(var(--seven-section-y) * 0.85); }
}

@media (min-width: 1024px) {
  /* 料金表を2カラムに並べ、縦の長さを抑える */
  .seven-page .seven-price-section .seven-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
  }
  .seven-page .seven-price-section .seven-badge,
  .seven-page .seven-price-section .seven-h2,
  .seven-page .seven-price-section .seven-section__lead,
  .seven-page .seven-price-section .seven-notice { grid-column: 1 / -1; }
}

/* Phase F1.1b: price専用。HOME・通常固定ページ・投稿には適用しない。 */
body.seven-price-page .mobile-footer-menu-buttons { display: none; }
body.seven-price-page { margin-bottom: 0; }

/* skin-season-autumn の table th 背景を料金表だけ上書き。 */
.seven-page--price .seven-price-table th,
.seven-page--price .seven-price-table td { background: var(--seven-surface); }
.seven-page--price .seven-price-section .seven-container { align-items: start; }

@media (max-width: 767px) {
  .seven-page--price .seven-price-section,
  .seven-page--price .seven-price-notes { padding-block: calc(var(--seven-section-y) * 0.875); }
}

/* 既存mu-pluginのFABをHOMEと同寸法の横型に。初期状態は非表示。 */
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) .seven-line-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  animation: none;
  left: auto;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: auto;
  min-width: 138px;
  height: 50px;
  margin: 0;
  padding-inline: 16px;
  flex-direction: row;
  gap: 8px;
  border-radius: var(--seven-radius-pill);
  background: var(--seven-line);
  box-shadow: var(--seven-shadow);
}
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) .seven-price-fab--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) .seven-line-fab__icon { width: 26px; height: 26px; flex: 0 0 auto; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) .seven-line-fab__label { font-size: 0; line-height: 1; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) .seven-line-fab__label small { display: none; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) .seven-line-fab__label::after {
  content: "LINE予約";
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) .seven-line-fab:focus-visible {
  outline: 3px solid var(--seven-accent);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) .seven-line-fab {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-width: 124px;
    height: 48px;
    padding-inline: 14px;
  }
  body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) .seven-line-fab__icon { width: 24px; height: 24px; }
  body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) .seven-line-fab__label::after { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) .seven-line-fab { transition: none; transform: none; }
}

/* 店舗情報widgetはPHPでiframeなしに置換。親のprivacy/copyrightは維持する。 */
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .footer-in,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .footer-bottom {
  background: var(--seven-primary-dark);
  color: var(--seven-surface);
  margin-top: 0;
  border-top: 0;
}
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .footer-bottom-content,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer #navi-footer,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer #navi-footer-in,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .menu-footer,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .menu-footer li,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .menu-footer li a,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .copyright { background: transparent; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .footer-in { padding-block: 24px; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer { padding: 0; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .footer-left { width: 100%; padding: 0; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .footer-center,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .footer-right,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .footer-bottom-logo,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .sns-follow-buttons { display: none; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .widget { margin: 0; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .seven-footer-shop { text-align: center; font-size: 14px; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .seven-footer-shop p { margin: 0 0 8px; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .seven-footer-shop__name { font-size: 16px; font-weight: 700; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer a { color: var(--seven-surface); }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .seven-footer-shop a {
  display: inline-flex;
  align-items: center;
  min-height: var(--seven-tap);
  text-underline-offset: 3px;
}
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .footer-bottom { margin: 0; padding: 0; text-align: center; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .footer-bottom-content { float: none; margin: 0; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .navi-footer-in > .menu-footer { justify-content: center; margin: 0; padding: 0; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .copyright { margin-top: 8px; font-size: 13px; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer #navi-footer li a { color: var(--seven-surface); }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer #navi-footer li a:hover { background: transparent; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #main.main,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #content,
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #content-in.wrap { margin-bottom: 0; padding-bottom: 0; }
body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) .seven-final-cta { margin-bottom: 0; }

@media (max-width: 767px) {
  body:is(.seven-price-page, .seven-mens-page, .seven-ladies-page, .seven-beauty-care-page, .seven-eyelash-page) #footer .footer-in { padding-block: 22px; }
}

/* Phase F3: メンズ固有。料金・HOME・ブログ・投稿への指定は増やさない。 */
body.seven-mens-page .mobile-footer-menu-buttons { display: none; }
body.seven-mens-page { margin-bottom: 0; }
body.seven-mens-page .seven-line-fab { box-sizing: border-box; width: 138px; min-width: 0; }
body.seven-mens-page .seven-page--mens h1,
body.seven-mens-page .seven-page--mens h2,
body.seven-mens-page .seven-page--mens h3 {
  padding: 0; border: 0; background: transparent; letter-spacing: normal;
  overflow-wrap: anywhere; color: var(--seven-text);
}
body.seven-mens-page .seven-page--mens .seven-final-cta__title { color: var(--seven-surface); }
.seven-page--mens p { margin: 0; }
.seven-page--mens .seven-mens-note { margin-top: 16px; font-size: var(--seven-fs-small); color: var(--seven-text-muted); }
.seven-page--mens .seven-mens-split { display: grid; gap: 28px; align-items: center; }
.seven-page--mens .seven-mens-split > * { min-width: 0; }
.seven-page--mens .seven-mens-photo img { display: block; width: 100%; border-radius: var(--seven-radius); }
.seven-page--mens .seven-mens-photo--aux { max-width: 400px; margin: 28px auto 0; }
.seven-page--mens .seven-mens-photo--products { width: 100%; max-width: 400px; margin-inline: auto; }
.seven-page--mens .seven-mens-services,
.seven-page--mens .seven-mens-barber,
.seven-page--mens .seven-mens-homecare { background: var(--seven-surface); }
.seven-page--mens .seven-mens-grid,
.seven-page--mens .seven-mens-price-grid,
.seven-page--mens .seven-mens-articles {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--seven-gap);
  margin: 28px 0 0; padding: 0; list-style: none;
}
.seven-page--mens .seven-mens-card {
  min-width: 0; padding: 24px; background: var(--seven-bg);
  border: var(--seven-border-w) solid var(--seven-border); border-radius: var(--seven-radius);
}
.seven-page--mens .seven-mens-card h3,
.seven-page--mens .seven-mens-down h3 { margin: 0 0 16px; font-size: var(--seven-fs-h3); line-height: 1.5; }
.seven-page--mens .seven-mens-prices .seven-mens-card { background: var(--seven-surface); }
.seven-page--mens .seven-mens-price-grid dt { font-weight: 400; }
.seven-page--mens .seven-mens-price-grid dd,
.seven-page--mens .seven-mens-amount { margin: 12px 0; font-size: 26px; font-weight: 700; color: var(--seven-primary-dark); }
.seven-page--mens .seven-mens-down { max-width: 600px; margin: 28px auto 0; }
.seven-page--mens .seven-mens-down dl { margin: 0; }
.seven-page--mens .seven-mens-down dl > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: var(--seven-border-w) solid var(--seven-border); }
.seven-page--mens .seven-mens-down dt { font-weight: 400; }
.seven-page--mens .seven-mens-down dd { margin: 0; font-weight: 700; color: var(--seven-primary-dark); }
.seven-page--mens .seven-btn { box-sizing: border-box; max-width: 100%; padding-block: 12px; }
.seven-page--mens .seven-btn--secondary { border-color: var(--seven-primary); background: var(--seven-surface); color: var(--seven-primary); }
.seven-page--mens .seven-btn--secondary:hover { background: var(--seven-primary-soft); }
.seven-page--mens .seven-mens-text-link { display: inline-flex; align-items: center; min-height: var(--seven-tap); color: var(--seven-primary); text-underline-offset: 3px; }
/* blog-card.phpのHTMLを再利用し、見た目はサービスCSS内で完結する。 */
.seven-page--mens .seven-blog-card { min-width: 0; margin: 0; padding: 0; border: var(--seven-border-w) solid var(--seven-border); border-radius: var(--seven-radius); background: var(--seven-surface); }
.seven-page--mens .seven-blog-card__link { display: block; height: 100%; color: var(--seven-text); text-decoration: none; border-radius: var(--seven-radius); }
.seven-page--mens .seven-blog-card__image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--seven-border); border-radius: var(--seven-radius) var(--seven-radius) 0 0; }
.seven-page--mens .seven-blog-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.seven-page--mens .seven-blog-card__body { padding: 24px; }
.seven-page--mens .seven-blog-card__category { display: inline-block; padding: 4px 12px; border-radius: var(--seven-radius-pill); color: var(--seven-primary); background: var(--seven-primary-soft); font-size: var(--seven-fs-small); }
.seven-page--mens .seven-blog-card__date { display: block; margin-block: 12px; color: var(--seven-text-muted); font-size: var(--seven-fs-small); }
body.seven-mens-page .seven-page--mens .seven-blog-card__title { margin: 0; font-size: var(--seven-fs-h3); line-height: 1.6; }
.seven-page--mens .seven-blog-card__link:hover .seven-blog-card__title { text-decoration: underline; }
@media (max-width: 767px) {
  body.seven-mens-page .seven-line-fab { width: 124px; min-width: 0; }
  .seven-page--mens .seven-btn-group { flex-direction: column; align-items: flex-start; }
  .seven-page--mens .seven-btn-group--center { align-items: center; }
}
@media (min-width: 768px) {
  .seven-page--mens .seven-mens-grid,
  .seven-page--mens .seven-mens-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seven-page--mens .seven-mens-split--image { grid-template-columns: 1.2fr 1fr; gap: 40px; }
  .seven-page--mens .seven-mens-articles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .seven-page--mens .seven-mens-price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Phase F3.1: 実機レビュー対象の375〜430pxだけを調整。 */
@media (min-width: 375px) and (max-width: 430px) {
  body.seven-mens-page #seven-mens-barber-title,
  body.seven-mens-page #seven-mens-related-title {
    max-width: 12em;
    word-break: normal;
    overflow-wrap: normal;
  }
  .seven-page--mens .seven-mens-price-grid .seven-mens-card {
    padding-block: 8px;
  }
}

/* Phase F4: 写真なしのレディースVersion 1。既存ページへの指定は増やさない。 */
body.seven-ladies-page .mobile-footer-menu-buttons { display: none; }
body.seven-ladies-page { margin-bottom: 0; }
body.seven-ladies-page .seven-line-fab { box-sizing: border-box; width: 138px; min-width: 0; }
body.seven-ladies-page .seven-page--ladies h1,
body.seven-ladies-page .seven-page--ladies h2,
body.seven-ladies-page .seven-page--ladies h3 {
  padding: 0; border: 0; background: transparent; letter-spacing: normal;
  overflow-wrap: anywhere; color: var(--seven-text);
}
body.seven-ladies-page .seven-page--ladies .seven-final-cta__title { color: var(--seven-surface); }
.seven-page--ladies p { margin: 0; }
.seven-page--ladies .seven-ladies-note { margin-top: 16px; font-size: var(--seven-fs-small); color: var(--seven-text-muted); }
.seven-page--ladies .seven-ladies-intro,
.seven-page--ladies .seven-ladies-care,
.seven-page--ladies .seven-ladies-homecare { background: var(--seven-surface); }
.seven-page--ladies .seven-ladies-grid,
.seven-page--ladies .seven-ladies-price-grid,
.seven-page--ladies .seven-ladies-articles {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--seven-gap);
  margin: 28px 0 0; padding: 0; list-style: none;
}
.seven-page--ladies .seven-ladies-card {
  min-width: 0; padding: 24px; background: var(--seven-bg);
  border: var(--seven-border-w) solid var(--seven-border); border-radius: var(--seven-radius);
}
.seven-page--ladies .seven-ladies-prices .seven-ladies-card { background: var(--seven-surface); }
.seven-page--ladies .seven-ladies-price-grid dt { font-weight: 400; }
.seven-page--ladies .seven-btn { box-sizing: border-box; max-width: 100%; padding-block: 12px; }
.seven-page--ladies .seven-btn--secondary { border-color: var(--seven-primary); background: var(--seven-surface); color: var(--seven-primary); }
.seven-page--ladies .seven-btn--secondary:hover { background: var(--seven-primary-soft); }
.seven-page--ladies .seven-ladies-text-link { display: inline-flex; align-items: center; min-height: var(--seven-tap); color: var(--seven-primary); text-underline-offset: 3px; }
/* blog-card.phpのHTMLを再利用し、見た目はサービスCSS内で完結する。 */
.seven-page--ladies .seven-blog-card { min-width: 0; margin: 0; padding: 0; border: var(--seven-border-w) solid var(--seven-border); border-radius: var(--seven-radius); background: var(--seven-surface); }
.seven-page--ladies .seven-blog-card__link { display: block; height: 100%; color: var(--seven-text); text-decoration: none; border-radius: var(--seven-radius); }
.seven-page--ladies .seven-blog-card__image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--seven-border); border-radius: var(--seven-radius) var(--seven-radius) 0 0; }
.seven-page--ladies .seven-blog-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.seven-page--ladies .seven-blog-card__body { padding: 24px; }
.seven-page--ladies .seven-blog-card__category { display: inline-block; padding: 4px 12px; border-radius: var(--seven-radius-pill); color: var(--seven-primary); background: var(--seven-primary-soft); font-size: var(--seven-fs-small); }
.seven-page--ladies .seven-blog-card__date { display: block; margin-block: 12px; color: var(--seven-text-muted); font-size: var(--seven-fs-small); }
body.seven-ladies-page .seven-page--ladies .seven-blog-card__title { margin: 0; font-size: var(--seven-fs-h3); line-height: 1.6; }
.seven-page--ladies .seven-blog-card__link:hover .seven-blog-card__title { text-decoration: underline; }
@media (max-width: 767px) {
  body.seven-ladies-page .seven-line-fab { width: 124px; min-width: 0; }
  .seven-page--ladies .seven-btn-group { flex-direction: column; align-items: flex-start; }
  .seven-page--ladies .seven-btn-group--center { align-items: center; }
}
@media (min-width: 768px) {
  .seven-page--ladies .seven-ladies-grid,
  .seven-page--ladies .seven-ladies-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seven-page--ladies .seven-ladies-articles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .seven-page--ladies .seven-ladies-price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


.seven-page--ladies .seven-ladies-card h3 { margin: 0 0 16px; font-size: var(--seven-fs-h3); line-height: 1.5; }
.seven-page--ladies .seven-ladies-price-grid dd { margin: 12px 0; font-size: 26px; font-weight: 700; color: var(--seven-primary-dark); }
.seven-page--ladies .seven-ladies-price-grid .seven-ladies-card { padding-block: 12px; }
.seven-page--ladies .seven-ladies-hero__copy { max-width: 880px; }
.seven-page--ladies .seven-ladies-note p + p { margin-top: 8px; }
body.seven-ladies-page .seven-page--ladies :is(h1, h2, h3) { word-break: normal; overflow-wrap: anywhere; text-wrap: balance; }
@media (max-width: 767px) {
  .seven-page--ladies .seven-ladies-card { padding-inline: 20px; }
}

/* Phase F4.1: 実写真。元の縦横比を保ち、レディース内だけに適用する。 */
.seven-page--ladies .seven-ladies-hero > .seven-container,
.seven-page--ladies .seven-ladies-intro > .seven-container {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center;
}
.seven-page--ladies .seven-ladies-photo { margin: 0; min-width: 0; }
.seven-page--ladies .seven-ladies-photo img {
  display: block; width: 100%; height: auto; border-radius: var(--seven-radius);
}
.seven-page--ladies .seven-ladies-hero__photo { width: 100%; max-width: 640px; justify-self: center; }
.seven-page--ladies .seven-ladies-intro__photo { width: 100%; max-width: 280px; justify-self: center; }
.seven-page--ladies .seven-ladies-styles { background: var(--seven-surface); }
.seven-page--ladies .seven-ladies-styles__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
  max-width: 760px; margin: 28px auto 0;
}
.seven-page--ladies .seven-ladies-style { width: 100%; max-width: 320px; justify-self: center; }
.seven-page--ladies .seven-ladies-style figcaption {
  margin-top: 16px; font-size: var(--seven-fs-body); line-height: 1.7; color: var(--seven-text);
}
@media (min-width: 768px) {
  .seven-page--ladies .seven-ladies-intro > .seven-container { grid-template-columns: minmax(0, 1fr) 280px; }
  .seven-page--ladies .seven-ladies-styles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seven-page--ladies .seven-ladies-style { max-width: 360px; }
}
@media (min-width: 1024px) {
  .seven-page--ladies .seven-ladies-hero > .seven-container { grid-template-columns: 1.1fr 1fr; gap: 40px; }
  .seven-page--ladies .seven-ladies-intro > .seven-container { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; }
  .seven-page--ladies .seven-ladies-intro__photo { max-width: 320px; }
}

/* Phase F5: 2F女性専用美容ケア。既存トークン・共通FAB/footerを利用。 */
body.seven-beauty-care-page { margin-bottom: 0; }
body.seven-beauty-care-page .mobile-footer-menu-buttons { display: none; }
body.seven-beauty-care-page .seven-line-fab { box-sizing: border-box; width: 138px; min-width: 0; }
body.seven-beauty-care-page .seven-page--beauty-care :is(h1, h2, h3) {
  padding: 0; border: 0; background: transparent; letter-spacing: normal;
  color: var(--seven-text); word-break: normal; overflow-wrap: anywhere; text-wrap: balance;
}
body.seven-beauty-care-page .seven-page--beauty-care .seven-final-cta__title { color: var(--seven-surface); }
.seven-page--beauty-care p { margin: 0; }
.seven-page--beauty-care .seven-beauty-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.seven-page--beauty-care .seven-beauty-photo { margin: 0; width: 100%; max-width: 640px; justify-self: center; }
.seven-page--beauty-care .seven-beauty-photo img { display: block; width: 100%; height: auto; border-radius: var(--seven-radius); }
.seven-page--beauty-care :is(.seven-beauty-intro, .seven-beauty-hair-removal, .seven-beauty-related) { background: var(--seven-surface); }
.seven-page--beauty-care .seven-beauty-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--seven-gap); margin: 28px 0 0; }
.seven-page--beauty-care .seven-beauty-card { padding: 24px; border: var(--seven-border-w) solid var(--seven-border); border-radius: var(--seven-radius); background: var(--seven-surface); min-width: 0; }
.seven-page--beauty-care .seven-beauty-card h3 { margin: 0 0 16px; font-size: var(--seven-fs-h3); line-height: 1.5; }
.seven-page--beauty-care .seven-beauty-amount { margin: 12px 0 0; font-size: 26px; font-weight: 700; color: var(--seven-primary-dark); }
.seven-page--beauty-care .seven-beauty-note { margin-top: 16px; color: var(--seven-text-muted); font-size: var(--seven-fs-small); }
.seven-page--beauty-care .seven-beauty-preparation { margin-top: 24px; }
.seven-page--beauty-care .seven-beauty-preparation p + p { margin-top: 12px; }
.seven-page--beauty-care .seven-btn { box-sizing: border-box; max-width: 100%; padding-block: 12px; }
.seven-page--beauty-care .seven-btn--secondary { border-color: var(--seven-primary); background: var(--seven-surface); color: var(--seven-primary); }
.seven-page--beauty-care .seven-btn--secondary:hover { background: var(--seven-primary-soft); }
.seven-page--beauty-care .seven-beauty-articles { display: grid; max-width: 520px; margin: 28px auto 0; padding: 0; list-style: none; }
.seven-page--beauty-care .seven-blog-card { min-width: 0; border: var(--seven-border-w) solid var(--seven-border); border-radius: var(--seven-radius); background: var(--seven-surface); }
.seven-page--beauty-care .seven-blog-card__link { display: block; color: var(--seven-text); text-decoration: none; }
.seven-page--beauty-care .seven-blog-card__image { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--seven-radius) var(--seven-radius) 0 0; }
.seven-page--beauty-care .seven-blog-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seven-page--beauty-care .seven-blog-card__body { padding: 24px; }
.seven-page--beauty-care .seven-blog-card__category { display: inline-block; padding: 4px 12px; border-radius: var(--seven-radius-pill); background: var(--seven-primary-soft); color: var(--seven-primary); font-size: var(--seven-fs-small); }
.seven-page--beauty-care .seven-blog-card__date { display: block; margin-block: 12px; color: var(--seven-text-muted); font-size: var(--seven-fs-small); }
body.seven-beauty-care-page .seven-blog-card__title { margin: 0; font-size: var(--seven-fs-h3); line-height: 1.6; }
.seven-page--beauty-care .seven-blog-card__link:hover .seven-blog-card__title { text-decoration: underline; }
@media (max-width: 767px) {
  body.seven-beauty-care-page .seven-line-fab { width: 124px; }
  .seven-page--beauty-care .seven-btn-group { flex-direction: column; align-items: flex-start; }
  .seven-page--beauty-care .seven-btn-group--center { align-items: center; }
}
@media (min-width: 768px) { .seven-page--beauty-care .seven-beauty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .seven-page--beauty-care .seven-beauty-hero__inner { grid-template-columns: 1.1fr 1fr; gap: 40px; }
  .seven-page--beauty-care .seven-beauty-price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Phase F6: まつ毛ページ専用。実施術写真は切り抜かず表示。 */
body.seven-eyelash-page { margin-bottom: 0; }
body.seven-eyelash-page .mobile-footer-menu-buttons { display: none; }
body.seven-eyelash-page .seven-line-fab { box-sizing: border-box; width: 138px; min-width: 0; }
body.seven-eyelash-page .seven-page--eyelash :is(h1, h2, h3) {
  padding: 0; border: 0; background: transparent; letter-spacing: normal;
  color: var(--seven-text); word-break: normal; overflow-wrap: anywhere; text-wrap: balance;
}
body.seven-eyelash-page .seven-page--eyelash .seven-final-cta__title { color: var(--seven-surface); }
.seven-page--eyelash p { margin: 0; }
.seven-page--eyelash .seven-eyelash-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.seven-page--eyelash .seven-eyelash-photo { margin: 0; width: 100%; max-width: 640px; justify-self: center; }
.seven-page--eyelash .seven-eyelash-photo img { display: block; width: 100%; height: auto; border-radius: var(--seven-radius); }
.seven-page--eyelash .seven-eyelash-intro { background: var(--seven-surface); }
.seven-page--eyelash .seven-eyelash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--seven-gap); margin: 28px 0 0; }
.seven-page--eyelash .seven-eyelash-card { padding: 24px; border: var(--seven-border-w) solid var(--seven-border); border-radius: var(--seven-radius); background: var(--seven-surface); min-width: 0; }
.seven-page--eyelash .seven-eyelash-card h3 { margin: 0 0 16px; font-size: var(--seven-fs-h3); line-height: 1.5; }
.seven-page--eyelash .seven-eyelash-amount { margin: 12px 0 0; font-size: 26px; font-weight: 700; color: var(--seven-primary-dark); }
.seven-page--eyelash .seven-eyelash-note { margin-top: 16px; color: var(--seven-text-muted); font-size: var(--seven-fs-small); }
.seven-page--eyelash .seven-btn { box-sizing: border-box; max-width: 100%; padding-block: 12px; }
.seven-page--eyelash .seven-btn--secondary { border-color: var(--seven-primary); background: var(--seven-surface); color: var(--seven-primary); }
.seven-page--eyelash .seven-btn--secondary:hover { background: var(--seven-primary-soft); }
.seven-page--eyelash .seven-eyelash-articles { display: grid; max-width: 520px; margin: 28px auto 0; padding: 0; list-style: none; }
.seven-page--eyelash .seven-blog-card { min-width: 0; border: var(--seven-border-w) solid var(--seven-border); border-radius: var(--seven-radius); background: var(--seven-surface); }
.seven-page--eyelash .seven-blog-card__link { display: block; color: var(--seven-text); text-decoration: none; }
.seven-page--eyelash .seven-blog-card__image { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--seven-radius) var(--seven-radius) 0 0; }
.seven-page--eyelash .seven-blog-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seven-page--eyelash .seven-blog-card__body { padding: 24px; }
.seven-page--eyelash .seven-blog-card__category { display: inline-block; padding: 4px 12px; border-radius: var(--seven-radius-pill); background: var(--seven-primary-soft); color: var(--seven-primary); font-size: var(--seven-fs-small); }
.seven-page--eyelash .seven-blog-card__date { display: block; margin-block: 12px; color: var(--seven-text-muted); font-size: var(--seven-fs-small); }
body.seven-eyelash-page .seven-blog-card__title { margin: 0; font-size: var(--seven-fs-h3); line-height: 1.6; }
.seven-page--eyelash .seven-blog-card__link:hover .seven-blog-card__title { text-decoration: underline; }
@media (max-width: 767px) {
  body.seven-eyelash-page .seven-line-fab { width: 124px; }
  .seven-page--eyelash .seven-btn-group { flex-direction: column; align-items: flex-start; }
  .seven-page--eyelash .seven-btn-group--center { align-items: center; }
}
@media (min-width: 768px) { .seven-page--eyelash .seven-eyelash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .seven-page--eyelash .seven-eyelash-hero__inner { grid-template-columns: 1.1fr 1fr; gap: 40px; }
  .seven-page--eyelash .seven-eyelash-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.seven-page--eyelash .seven-eyelash-styles-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 28px; align-items: start; }
.seven-page--eyelash .seven-eyelash-photo figcaption { margin-top: 12px; text-align: center; color: var(--seven-text-muted); }
.seven-page--eyelash .seven-eyelash-room .seven-eyelash-photo { margin: 28px auto 0; }
.seven-page--eyelash .seven-eyelash-pause { background: var(--seven-surface); }
.seven-page--eyelash .seven-eyelash-notes { margin: 24px 0 0; padding-left: 1.5em; }
.seven-page--eyelash .seven-eyelash-notes li + li { margin-top: 16px; }
.seven-page--eyelash .seven-eyelash-homecare .seven-btn-group { margin-top: 28px; }
@media (min-width: 768px) { .seven-page--eyelash .seven-eyelash-styles-grid { grid-template-columns: 1.2fr 1fr; } }

/* Phase F6.1: small mobile price cards only; type and decoration stay unchanged. */
@media (min-width: 375px) and (max-width: 430px) {
  .seven-page--eyelash .seven-eyelash-price-grid .seven-eyelash-card { padding-block: 12px; }
}