/*
 * main.css 目次（ページ別は assets/css/modules/ — inc/asset-styles.php）
 * - :root トークン（下記、mock <style id="axihub-site"> から抽出）
 * - base（box-sizing / body / a / .inner / .page-content / .axihub-page / .axihub-media）
 * - modules/header-footer.css — ヘッダー・フッター
 * - modules/mobile.css — 共通スマホ最適化（トークン利用）
 * - modules/front-mobile.css — TOP SP 詰め（TOP 最終）
 * - modules/fv.css — FV（メインビジュアル）
 * - modules/search.css — クイック検索
 * - modules/pickup.css — 注目物件 PickUP
 * - modules/ranking.css — ランキング
 * - modules/new-slider.css — 新着物件スライダー
 * - modules/reasons.css — 選ばれる理由
 * - modules/cta-banner.css — 中間 CTA バナー
 * - modules/voice.css — お客様の声
 * - modules/news.css — お知らせ一覧
 * - modules/column.css — コラム一覧
 * - modules/about.css — About
 * - modules/strength.css — 強み
 * - modules/faq.css — よくある質問
 * - modules/watermark.css — TOP / LP 共通 .axihub-wm
 * - modules/lp-concept|guide|owner|support.css / usage.css — Salon 同型静的 LP
 * - modules/lp-hub-theme.css — LP を AxiHUB 青ベースに寄せる
 * - modules/front-sections.css — sec-head / sec-more（TOP + LP）
 * 詳細: assets/ASSETS-MAP.md
 */

:root {
  --color-bg: #FFFFFF;
  --color-bg-muted: #F5F5F5;
  --color-border: #E5E5E5;
  --color-text: #111111;
  --color-text-muted: #6B7280;
  --color-accent: #0891C9;
  --color-accent-hover: #0779A8;
  --color-inverse: #111111;
  --color-inverse-hover: #000000;
  --color-on-inverse: #FFFFFF;
  --color-line: #06C755;
  --color-line-hover: #05B34C;
  --color-line-text: #ffffff;
  --color-error: #C0392B;
  --color-cta-banner: var(--color-accent);
  --color-cta-chip: #FFFFFF;
  --color-cta-chip-text: var(--color-text);
  --color-cta-btn: #FFFFFF;
  --color-cta-btn-text: var(--color-text);
  --color-footer-text: rgba(255, 255, 255, 0.7);
  --color-footer-border: rgba(255, 255, 255, 0.12);
  /* Watermark gradient (front-sections.css .axihub-wm) — stop 1 == --color-accent */
  --color-wm-2: #5BA9C9;
  --color-wm-3: #A8B0B8;
  --color-wm-4: #D0D4D8;
  /* Translucent white — alpha variants of --color-on-inverse, used over photos/dark bands */
  --color-on-inverse-a06: rgba(255, 255, 255, .055);
  --color-on-inverse-a10: rgba(255, 255, 255, .1);
  --color-on-inverse-a28: rgba(255, 255, 255, .28);
  --color-on-inverse-a50: rgba(255, 255, 255, .5);
  --color-on-inverse-a55: rgba(255, 255, 255, .55);
  --color-on-inverse-a62: rgba(255, 255, 255, .62);
  --color-on-inverse-a65: rgba(255, 255, 255, .65);
  --color-on-inverse-a70: rgba(255, 255, 255, .7);
  --color-on-inverse-a72: rgba(255, 255, 255, .72);
  --color-on-inverse-a80: rgba(255, 255, 255, .8);
  --color-on-inverse-a85: rgba(255, 255, 255, .85);
  --color-on-inverse-a86: rgba(255, 255, 255, .86);
  --color-on-inverse-a92: rgba(255, 255, 255, .92);
  /* FV readability shade (fv.css .axihub-fv__shade) */
  --fv-shade-a18: rgba(0, 0, 0, .18);
  --fv-shade-a22: rgba(0, 0, 0, .22);
  --fv-shade-a28: rgba(0, 0, 0, .28);
  --fv-shade-a55: rgba(0, 0, 0, .55);
  --fv-shade-a78: rgba(0, 0, 0, .78);
  /* Drop shadow */
  --color-shadow-a16: rgba(0, 0, 0, .16);
  --color-shadow-a22: rgba(0, 0, 0, .22);
  --color-shadow-a25: rgba(0, 0, 0, .25);
  /* Overlays (property list/detail) */
  --overlay-a40: rgba(0, 0, 0, .4);
  --overlay-a45: rgba(0, 0, 0, .45);
  --overlay-a50: rgba(0, 0, 0, .5);
  --overlay-a92: rgba(0, 0, 0, .92);
  --overlay-border-a10: rgba(0, 0, 0, .1);
  --color-on-inverse-a15: rgba(255, 255, 255, .15);
  --color-on-inverse-a20: rgba(255, 255, 255, .2);
  /* Property module aliases (ported salon tokens) */
  --color-ink-main: var(--color-text);
  --color-text-soft: var(--color-text-muted);
  --color-surface: var(--color-bg-muted);
  --color-surface-2: #EEEEEE;
  --flow-border: var(--color-border);
  --shadow-card: 0 4px 20px var(--color-shadow-a25);
  --font-en: 'Space Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --space-16: 16px;
  --space-24: 24px;
  --dur-base: 220ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --z-modal: 500;
  /* Empty media / placeholder fill (Salon used a photo; Hub uses muted surface) */
  --menu-img-bg: var(--color-bg-muted);
  --voice-hero-deco: rgba(255, 255, 255, 0.07);
  --voice-item-index: rgba(0, 0, 0, 0.06);
  --color-surface-tint: rgba(0, 0, 0, 0.03);
  --color-surface-tint-strong: rgba(0, 0, 0, 0.04);
  --owner-img-slot-bg: var(--color-bg-muted);
  --owner-img-slot-border: var(--color-border);
  --owner-dark-bg: var(--color-accent);
  --owner-dark-text: var(--color-on-inverse);
  --owner-dark-text-soft: var(--color-on-inverse-a85);
  --owner-dark-border: var(--color-on-inverse-a28);
  --owner-index-color: rgba(8, 145, 201, 0.14);
  --owner-panel-bg: var(--color-accent-hover);
  --owner-img-slot-dark-bg: var(--color-on-inverse-a15);
  --owner-img-slot-dark-border: var(--color-on-inverse-a28);
  --owner-hero-visual-bg: var(--color-accent-hover);
  --ghost-num-light: rgba(8, 145, 201, 0.1);
  --ghost-num-dark: var(--color-on-inverse-a15);
  --dark-index-color: var(--color-on-inverse-a20);
  --shadow-card-soft: 0 2px 22px var(--color-shadow-a16);
  --color-ink-strong: var(--color-text);
  --color-link: var(--color-accent);
  --color-link-hover: var(--color-accent-hover);
  --fs-md: 1rem;
  --fs-xl: 1.5rem;
  --fv-header-height: 128px;
  /* Typography scale */
  --fs-h2: 28px;
  --fs-h2-lead: 32px;
  --fw-h2: 700;
  --lh-h2: 1.4;
  /* Content column — 1180px max + side gutters（PC はフローティング CTA 分を加算） */
  --layout-inner-max: 1180px;
  --layout-gutter: 80px;
  --layout-inner: min(var(--layout-inner-max), calc(100% - var(--layout-gutter)));
  /* PC 右端フローティング CTA（縦書きボタン列） */
  --floating-cta-pc-width: 76px;
  --floating-cta-pc-clear: calc(var(--floating-cta-pc-width) + 24px);

  /*
   * Mobile / responsive tokens（詳細は modules/mobile.css）
   * ブレークポイント方針:
   *   --bp-tablet 相当: 900px … レイアウト切替の主軸（TOP・ヘッダー）
   *   --bp-phone  相当: 560px … 狭いスマホの詰め
   *   --bp-chrome 相当: 1024px … 下部フローティング CTA のみ（JS と同期）
   */
  --section-pad-y: 72px;
  --section-pad-x: 40px;
  --chrome-pad-x: 40px;
  --touch-min: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --space-8: 8px;
  --space-12: 12px;
  --space-20: 20px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
}

/* PC フローティング CTA 表示時（1025px〜）— 本文列にクリアランス */
@media (min-width: 1025px) {
  :root {
    --layout-gutter: calc(80px + var(--floating-cta-pc-clear));
    --layout-inner: min(var(--layout-inner-max), calc(100% - var(--layout-gutter)));
  }
}

@media (max-width: 900px) {
  :root {
    --fs-h2: 24px;
    --fs-h2-lead: 26px;
    --layout-gutter: 40px;
    --section-pad-y: 56px;
    --section-pad-x: 20px;
    --chrome-pad-x: 20px;
    --fv-header-height: 92px;
  }
}

@media (max-width: 560px) {
  :root {
    --fs-h2: 22px;
    --fs-h2-lead: 24px;
    --layout-gutter: 32px;
    --section-pad-y: 48px;
    --section-pad-x: 16px;
    --chrome-pad-x: 16px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* mock では .axihub-page に指定。本テーマは同等のラッパーを持たないため body に置く */
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', Meiryo, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
  /* 縦長ビューポートでコンテンツが短いとき、フッターを画面下端へ */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-accent);
}

a:hover {
  color: var(--color-accent-hover);
}

/* Shared content column for virtual static / thanks / inquiry wrappers */
.inner {
  width: var(--layout-inner);
  margin-inline: auto;
}

.breadcrumb {
  padding: 10px 0;
}

.breadcrumb ol {
  width: var(--layout-inner);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--color-border);
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb span[aria-current="page"] {
  color: var(--color-text);
}

.page-content {
  padding: 56px 0 72px;
}

.page-content__title {
  margin: 0 0 36px;
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  color: var(--color-text);
  letter-spacing: 0.04em;
}

.axihub-page {
  overflow-x: hidden;
}

.axihub-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.axihub-media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--color-bg-muted), var(--color-border));
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
  min-height: 100%;
}

.axihub-media--empty span {
  opacity: .75;
  padding: 8px;
  line-height: 1.4;
}

/* 物件サムネ未設定 — 白背景＋サイトロゴ（一覧カードと同じ方針） */
.axihub-media--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  min-height: 100%;
  box-sizing: border-box;
}

.axihub-media__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(70%, 140px);
  max-height: 56%;
  object-fit: contain;
  object-position: center;
}

.axihub-media__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.prop-media-logo {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 168px;
  padding: 5px 9px 6px;
  background: var(--color-bg);
  line-height: 0;
}

.prop-media-logo > img {
  display: block;
  width: auto;
  max-width: 132px;
  height: auto;
  max-height: 28px;
  object-fit: contain;
}

.prop-media-logo--compact {
  top: 4px;
  right: 4px;
  max-width: 118px;
  padding: 3px 6px 4px;
}

.prop-media-logo--compact > img {
  max-width: 100px;
  max-height: 20px;
}

/* 右上の保存ボタン（「保存済」で約70px）の左に媒体ロゴを置く */
.prop-card .prop-media-logo {
  right: 88px;
  max-width: min(168px, calc(100% - 162px));
}

.prop-card .prop-media-logo > img {
  max-width: 100%;
}

.prop-media-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: min(74%, 168px);
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}

.prop-private-media__logo-wrap:has(.prop-media-brand) {
  overflow: visible;
}

.prop-media-brand > .prop-private-media__logo,
.prop-media-brand > .axihub-media__logo {
  align-self: center;
  width: auto;
  max-width: 100%;
  max-height: calc(100% - 1.4rem);
}

.axihub-media--logo .prop-media-brand {
  max-width: min(70%, 140px);
}

.prop-produced-by {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 6px;
  line-height: 1;
}

.prop-produced-by__label {
  color: var(--color-text-soft);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.prop-produced-by img {
  display: block;
  width: auto;
  height: 14px;
  max-width: none;
  max-height: 14px;
  object-fit: contain;
}

.prop-media-logo .prop-produced-by {
  margin-top: 4px;
  max-width: 100%;
}

.prop-media-logo--compact .prop-produced-by {
  gap: 3px;
  margin-top: 3px;
}

.prop-media-logo--compact .prop-produced-by__label {
  font-size: 0.5625rem;
  letter-spacing: 0.02em;
}

.prop-media-logo--compact .prop-produced-by img {
  height: 11px;
  max-height: 11px;
}