/**
 * style.css — エントリーポイント（site_coyou）
 * ============================================================
 * mFLOCSS × 最新 CSS 機能 統合アーキテクチャ
 * jtcc_theme / site_corp と同じ層構造・トークン設計を踏襲しつつ、
 * ブランドトークン（tokens/brand.css）とタイポグラフィ（ゴシック体）
 * のみサイト固有に差し替えている。
 *
 * @layer の !important 逆転挙動について（重要）:
 *  通常: utility > affordance > ... > tokens （後ろが強い）
 *  !important: tokens > ... > utility （前が強い = 逆順）
 * ============================================================
 */

@layer
  vendors,
  tokens,
  theme,
  foundation,
  layout,
  component,
  project,
  utility;

/* ============================================================
   Vendors（外部CSS）
   ------------------------------------------------------------
   Google Fonts の Material Symbols は helper クラス
   （.material-symbols-outlined に font-size:24px / display:inline-block 等）
   を同梱しており、レイヤー外だと component/project 層の指定を
   すべて上書きしてしまう。layer(vendors) で最下層に押し込む。
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200") layer(vendors);

/* ============================================================
   Tokens
   ============================================================ */
@import "./tokens/color.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/shadow.css";
@import "./tokens/motion.css";
@import "./tokens/z-index.css";
@import "./tokens/brand.css";

/* ============================================================
   Theme
   ============================================================ */
@import "./theme/color.css";
@import "./theme/typography.css";
@import "./theme/spacing.css";

/* ============================================================
   Foundation
   ============================================================ */
@import "./foundation/reset.css";
@import "./foundation/base.css";

/* ============================================================
   Layout
   ============================================================ */
@import "./layout/l-container.css";
@import "./layout/l-grid.css";
@import "./layout/l-stack.css";
@import "./layout/l-cluster.css";

/* ============================================================
   Component
   ============================================================ */
@import "./component/c-hover.css";
@import "./component/c-button.css";
@import "./component/c-icon.css";

/* ============================================================
   Project
   ============================================================ */
@import "./project/p-section.css";
@import "./project/p-header.css";
@import "./project/p-hero.css";
@import "./project/p-trust.css";
@import "./project/p-service.css";
@import "./project/p-feature.css";
@import "./project/p-resorts.css";
@import "./project/p-flow.css";
@import "./project/p-news.css";
@import "./project/p-page-hero.css";
@import "./project/p-lower.css";
@import "./project/p-footer.css";
@import "./project/p-wp-utility.css";
@import "./project/p-contact-form.css";

/* ============================================================
   Utility
   ============================================================ */
@import "./utility/u-visually-hidden.css";
@import "./utility/u-spacing.css";
@import "./utility/u-display.css";
@import "./utility/u-text.css";