/* 汎用性重視、Sass不使用 CSSだけで構成した簡易版FLOCSSファイル群です。 */

/*====================
  01_foundation
====================*/
@import "./01_foundation/reset.css";/* 最低限のreset.css */
@import "./01_foundation/variable.css";/* 変数を定義 configで変数を使いたいので、configよりも先に読み込ませます。 */
@import "./01_foundation/config.css";/* その他ベースとなる設定 */
/*  */

/*====================
  02_layout
====================*/
/* @import "./02_layout/flex.css"; シンプルな段組みにご活用ください */
@import "./02_layout/bootstrap-grid.css";/* Bootstrap 5 の grid system を .l- 付けて使用 */
/* Bootstrapを無理に使う必要もありませんが、grid system だけでも使うと便利なシーンはあるかと思います。 

----- Bootstrap + utilityクラスを併用した使用例 -----

★★★★★★★★★★ PC SP 2カラム ★★★★★★★★★★

<div class="l-container l-px-0">
    <div class="l-row">
        <div class="l-col-6 u-mt-sm"></div>
        <div class="l-col-6 u-mt-sm"></div>
    </div>
</div>

★★★★★★★★★★ PC4カラム SP2カラム ★★★★★★★★★★

<div class="l-container l-px-0">
    <div class="l-row">
        <div class="l-col-md-3 l-col-6 u-mt-sm"></div>
        <div class="l-col-md-3 l-col-6 u-mt-sm"></div>
        <div class="l-col-md-3 l-col-6 u-mt-sm"></div>
        <div class="l-col-md-3 l-col-6 u-mt-sm"></div>
    </div>
</div>

※Bootstrap 5 参考URL
https://getbootstrap.jp/docs/5.0/layout/grid/
*/

@import "./02_layout/main.css";/* mainタグの枠を設定 */



/*====================
  03_component
====================*/
@import "./03_component/btn.css";/* ボタンの設定 */
@import "./03_component/product-card.css";/* 特集などの商品陳列用 */
@import "./03_component/title.css";/* 特集などの商品陳列用 */
@import "./03_component/caption.css";
@import "./03_component/hr.css";
@import "./03_component/sticky.css";

/*====================
  04_project
====================*/
@import "./04_project/novelty/novelty22.css";/* 2022年8月〜 ノベルティページに使用 */
@import "./04_project/brand/sonne.css";/* SONNE ブランドページ用CSS */
/* @import "./04_project/event/22xmas.css?1257"; */
/* 22xmas用CSS */

/*====================
  05_utility
====================*/
/*
  utilityクラスは便利ですが、
  レスポンシブ時小回りが効かないので、多様は避けたほうが良いでしょう。
  スマホとPCで同じプロパティ値で問題ないときなどにどうぞ。
*/
@import "./05_utility/display.css";
@import "./05_utility/overflow.css";
@import "./05_utility/space.css";
@import "./05_utility/width.css";
@import "./05_utility/img.css";
@import "./05_utility/font.css";
@import "./05_utility/text.css";
@import "./05_utility/color.css";
@import "./05_utility/arrow.css";
@import "./05_utility/border.css";


/*====================
  06_library
====================*/
/* CDN使わない場合の library の設置用。libraryの中身は自分では編集しません。
その代わり次の「07_external」で上書き。例えば
@import "./06_library/swiper-bundle.min.css";
*/

/*====================
  07_external
====================*/
/* library の上書き用。例えば以下のように自分でスタイルを上書き。
@import "./07_external/my-swiper-bundle.css";
*/