@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

/* ============================================================
   【最重要】Tailwind .container プラグインの誤適用を無効化
   ---------------------------------------------------------
   SANGOの #container には class="container" が付いているため、
   Tailwind の .container ルール（max-width: 1024px 等）が適用されて
   しまい、サイト全体が 1024px に制限されていた根本原因。
   tailwind.config.js で corePlugins.container: false を設定済みだが、
   サーバー上の dist/tailwind.css が古い場合の保険として追加。
   ============================================================ */

#container {
  max-width: 100% !important;
  width: 100% !important;
}

/* ============================================================
   Tailwind CSS 互換：box-sizing 修正
   Tailwindのpreflightを無効化しているため、デフォルトのcontent-boxが
   維持される。これにより.p-6等のpaddingクラスが幅に加算されてしまい
   グリッドレイアウトがコンテナからはみ出す問題を修正。
   ランディングページ（page-forfront）のentry-content内要素に限定適用。
   ============================================================ */

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

/* ============================================================
   Tailwind CSS 保護ルール
   SANGOのCSSがTailwindのユーティリティクラスを上書きするのを防ぐ。
   WordPressのカスタムHTMLブロック内でTailwindを使う際の保険。

   【使い分けの原則】
   - overflow / display / position などの「構造」→ style="" で直接書く
   - color / spacing など「見た目」→ Tailwindクラスでもほぼ問題なし
   ============================================================ */

/* overflow */
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }

/* display */
.hidden { display: none !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.inline { display: inline !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid { display: grid !important; }
.contents { display: contents !important; }

/* position */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }
.static { position: static !important; }

/* flex 子要素 */
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink { flex-shrink: 1 !important; }
.flex-grow { flex-grow: 1 !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.min-w-0 { min-width: 0 !important; }
.w-full { width: 100% !important; }

/* z-index */
.z-0   { z-index: 0  !important; }
.z-10  { z-index: 10 !important; }
.z-20  { z-index: 20 !important; }
.z-30  { z-index: 30 !important; }
.z-40  { z-index: 40 !important; }
.z-50  { z-index: 50 !important; }