/* ==================================================
   style.css（入口：読み込み専用）
   - ここには原則、見た目のCSSを書かない
   - 各ファイルを順番どおりに @import するだけ
================================================== */

/* ------------------------------
   Base（全ページ共通の土台）
------------------------------ */
@import url("./base/base.css");

/* ------------------------------
   Components（共通パーツ）
------------------------------ */
@import url("./components/header.css");
@import url("./components/footer.css");
@import url("./components/botton.css");


/* ------------------------------
   Sections（TOPなどで使う“セクション単位”）
------------------------------ */
@import url("./sections/top-hero.css");
@import url("./sections/top-about-laser.css");
@import url("./sections/top-laser-numbers.css");
@import url("./sections/top-worries.css");
@import url("./sections/top-perio-laser.css");
@import url("./sections/top-stomatitis-laser.css");
@import url("./sections/top-sensitive-laser.css");
@import url("./sections/top-faq.css");
@import url("./sections/top-clinic-information.css");
@import url("./sections/top-pain-less.css");
@import url("./sections/top-greeting.css");
@import url("./sections/flow-gallery.css");


/* ------------------------------
   Pages（ページ固有）
------------------------------ */
@import url("./pages/subpage.css");




/* ==========================
  Scroll Fade
========================== */

.fade-up{
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.fade-up.is-active{
  opacity: 1;
  transform: translateY(0);
}

.fade-left{
  opacity: 0;
  transform: translateX(-50px);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.fade-left.is-active{
  opacity: 1;
  transform: translateX(0);
}

.fade-right{
  opacity: 0;
  transform: translateX(50px);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.fade-right.is-active{
  opacity: 1;
  transform: translateX(0);
}

.fade-scale{
  opacity: 0;
  transform: scale(.92);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.fade-scale.is-active{
  opacity: 1;
  transform: scale(1);
}