/* ==========================================================================
   Global Styles & Base Layout (BEM)
   ========================================================================== */
@import url('./reset.css');
@import url('./variables.css');
@import url('./components/button.css');
@import url('./components/header.css');
@import url('./components/hero.css');
@import url('./components/news.css');
@import url('./components/about.css');
@import url('./components/guide.css');
@import url('./components/flow.css');
@import url('./components/price.css');
@import url('./components/trial.css');
@import url('./components/service.css');
@import url('./components/pain.css');
@import url('./components/voice.css');
@import url('./components/column.css');
@import url('./components/recruit.css');
@import url('./components/faq.css');
@import url('./components/footer.css');

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-main);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  word-break: break-word;
  overflow-x: hidden;
}

/* ==========================================================================
   Base Layout Classes (l- Prefix)
   ========================================================================== */

/* コンテナ（中央配置・最大幅制限） */
.l-container {
  width: 100%;
  max-width: var(--max-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: 24px;
  padding-left: 24px;
}

/* セクション間余白 */
.l-section {
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
}

/* ==========================================================================
   Responsive Rules (sm: 〜767px)
   ========================================================================== */
@media screen and (max-width: 767px) {
  .l-container {
    padding-right: 16px;
    padding-left: 16px;
  }
}