/*
 * zoroya-canvas 土台 CSS（スコープ境界リセット ＋ FV iframe ＋ SWELL枠調整）
 * ぞろ屋のデザイン本体は各ページの scoped.css（.zoroya-scope 前置済み）が受け持つ。
 * ここは SWELL とぞろ屋本文の相互干渉を境界で断ち、①固定ページの全幅化だけを行う。
 */

/* 境界：SWELL からの継承（line-height/color/max-width/box-sizing 等）を断つ。 */
.zoroya-scope {
  all: revert;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}
.zoroya-scope *,
.zoroya-scope *::before,
.zoroya-scope *::after {
  box-sizing: border-box;
}

/* SEO用の視覚非表示 h1（display:none にしない＝インデックス対象を保つ）。
   SWELL のタイトル帯を隠すと h1 が消えるため、body に無ければ render 側がこれを補う。 */
.zc-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* FV は iframe で隔離。既定はビューポート高。可変高 FV は zc-fv.js が postMessage で調整。 */
.zoroya-fv {
  display: block;
  width: 100%;
  height: 100svh;
  min-height: 100vh; /* svh 非対応のフォールバック */
  border: 0;
  margin: 0;
  padding: 0;
}
@supports (height: 100svh) {
  .zoroya-fv { min-height: 0; }
}

/* LP テンプレ（クローム非表示）は body の余白を消す */
body.zc-lp {
  margin: 0;
  padding: 0;
}

/* ───────────────────────────────────────────────
   ① ぞろ屋固定ページ（SWELL枠を維持）用の全幅化
   hico2019 実機の SWELL 構造に対応：本文の器は #content.l-content.l-container、
   タイトル帯（アイキャッチ＋タイトル）は .l-topTitleArea。
   すべて page-template-zoroya-page 限定なので、通常のSWELLページ・ブログ・
   ヘッダー／フッター（別コンテナ）には一切影響しない。
   ─────────────────────────────────────────────── */

/* 本文の器 #content(.l-content.l-container) の最大幅・左右余白を外して全幅に。
   ※ ヘッダー等の .l-container は対象にしない（#content / .l-content 限定）。 */
.page-template-zoroya-page #content,
.page-template-zoroya-page .l-content {
  max-width: none;
  width: 100%;
  padding: 0;          /* 左右だけでなく上下の余白も消す（タイトル帯を隠した上の白い空白対策） */
  margin: 0;
  overflow: visible;
}
/* 本文ラッパの上マージンも念のため消す */
.page-template-zoroya-page .zoroya-canvas-page,
.page-template-zoroya-page .zoroya-canvas-page > .zoroya-scope {
  margin-top: 0;
}

/* #content は SWELL では「本文＋サイドバー」の flex 行になっている。
   顔ページはサイドバー不要なので、flex を解除して本文だけを全幅に。 */
.page-template-zoroya-page #content {
  display: block;
}
.page-template-zoroya-page #sidebar,
.page-template-zoroya-page .l-sidebar {
  display: none;
}
.page-template-zoroya-page .zoroya-canvas-page {
  width: 100%;
  max-width: none;
}

/* SWELL のページタイトル帯（アイキャッチ＋タイトル）とパンくずを隠す。ぞろ屋のFVが主役。
   タイトル帯には SWELL の h1 があるので、body 側に .zc-visually-hidden の h1 を補う（render側）。
   パンくずの構造化データ（BreadcrumbList）は SEOプラグインが head の JSON-LD で別途出すため、
   見た目を消しても検索側の情報は残る。 */
.page-template-zoroya-page .l-topTitleArea,
.page-template-zoroya-page #breadcrumb,
.page-template-zoroya-page .p-breadcrumb {
  display: none;
}

/* Gutenberg化した zoroya ページでは WP が inner-container を挟むため、
   元HTMLと同じ grid / wrap の効き方に戻す。 */
.page-template-zoroya-page .zoroya-scope .wp-block-group.wrap > .wp-block-group__inner-container {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
}
.page-template-zoroya-page .zoroya-scope .wp-block-group.grid-2,
.page-template-zoroya-page .zoroya-scope .wp-block-group.grid-3 {
  display: block;
}
.page-template-zoroya-page .zoroya-scope .wp-block-group.grid-2 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}
.page-template-zoroya-page .zoroya-scope .wp-block-group.grid-3 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.page-template-zoroya-page .zoroya-scope .wp-block-group.section-head.center > .wp-block-group__inner-container {
  text-align: center;
}
.page-template-zoroya-page .zoroya-scope .wp-block-group.section-head.center .eyebrow {
  justify-content: center;
}
.page-template-zoroya-page .zoroya-scope .wp-block-group.card > .wp-block-group__inner-container > :first-child {
  margin-top: 0;
}
.page-template-zoroya-page .zoroya-scope .wp-block-group.card > .wp-block-group__inner-container > :last-child {
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .page-template-zoroya-page .zoroya-scope .wp-block-group.grid-2 > .wp-block-group__inner-container,
  .page-template-zoroya-page .zoroya-scope .wp-block-group.grid-3 > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .page-template-zoroya-page .zoroya-scope .wp-block-group.wrap > .wp-block-group__inner-container {
    width: min(100% - 28px, 1160px);
  }
}

/* Some SWELL setups output a bare <body> without template classes. Keep the
   canvas layout stable by keying off the rendered canvas wrapper itself. */
body:has(.zoroya-canvas-page) #content,
body:has(.zoroya-canvas-page) .l-content {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: visible;
}
body:has(.zoroya-canvas-page) #content {
  display: block;
}
body:has(.zoroya-canvas-page) #sidebar,
body:has(.zoroya-canvas-page) .l-sidebar {
  display: none;
}
body:has(.zoroya-canvas-page) .l-topTitleArea,
body:has(.zoroya-canvas-page) #breadcrumb,
body:has(.zoroya-canvas-page) .p-breadcrumb {
  display: none;
}
.zoroya-canvas-page .zoroya-scope .wp-block-group.wrap > .wp-block-group__inner-container {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
}
.zoroya-canvas-page .zoroya-scope .wp-block-group.grid-2,
.zoroya-canvas-page .zoroya-scope .wp-block-group.grid-3 {
  display: block;
}
.zoroya-canvas-page .zoroya-scope .wp-block-group.grid-2 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}
.zoroya-canvas-page .zoroya-scope .wp-block-group.grid-3 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.zoroya-canvas-page .zoroya-scope .wp-block-group.section-head.center > .wp-block-group__inner-container {
  text-align: center;
}
.zoroya-canvas-page .zoroya-scope .wp-block-group.section-head.center .eyebrow {
  justify-content: center;
}
@media (max-width: 900px) {
  .zoroya-canvas-page .zoroya-scope .wp-block-group.grid-2 > .wp-block-group__inner-container,
  .zoroya-canvas-page .zoroya-scope .wp-block-group.grid-3 > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .zoroya-canvas-page .zoroya-scope .wp-block-group.wrap > .wp-block-group__inner-container {
    width: min(100% - 28px, 1160px);
  }
}