@charset "UTF-8";
/* variable.scss (共通変数ファイル) */
:root {
  /* --- レイアウト設定 --- */
  --layout-width: 1170px;
  --breakpoint-sp: 768px;
  --container-padding: 15px;
  /* --- ベースフォント・テキスト設定 --- */
  --font-family-noto: 'Noto Sans JP', sans-serif;
  --line-height-base: 1.6;
  --font-size-base: 16px;
  /* --- スペーシング設定 --- */
  --space-section-pc: 100px;
  --space-section-sp: 56px;
  --space-card-pc: 60px;
  --space-card-sp: 32px;
  --space-item-pc: 40px;
  --space-item-sp: 24px;
  --space-base: 15px;
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 30px;
  --space-l-alt: 32px;
  --space-xl: 48px;
  --space-xxl: 60px;
  --space-huge: 80px;
  /* --- ボーダー半径 --- */
  --radius-s: 4px;
  --radius-m: 16px;
  --radius-ml: 20px;
  --radius-l: 24px;
  --radius-full: 999px;
  /* --- ヘッダー設定 --- */
  --header-height-pc: 80px;
  --header-height-sp: 70px;
  --header-logo-width: 110px;
  --header-logo-width-sp: 100px;
  /* --- テーマカラー --- */
  --color-primary: #DA6F31;
  --color-primary-dark: #FF7F51;
  --color-text-main: #444444;
  --color-text-sub: rgba(51, 51, 51, 0.8);
  --color-text-light: rgba(51, 51, 51, 0.7);
  --color-text-lighter: rgba(51, 51, 51, 0.5);
  --color-bg-main: #FDFCF8;
  --color-bg-sub: #ffffff;
  --color-bg-dark: #1A1A1A;
  --color-white: #FFFFFF;
  --color-border-light: rgba(0, 91, 172, 0.1);
  --color-border-medium: rgba(0, 91, 172, 0.2);
  --color-border-dark: rgba(51, 51, 51, 0.1);
}

/* --- テーマ別カラー --- */
.t-limini-eco {
  --color-primary: #698900;
  --color-primary-dark: #2A3720;
  --color-bg-dark: #2A3720;
  --color-border-light: #CCE5B0;
  --color-border-medium: rgba(105, 137, 0, 0.2);
  --color-bg-main: #fafff5;
}

.t-limini-compact {
  --color-primary: #004489;
  --color-primary-dark: #202C37;
  --color-bg-dark: #202C37;
  --color-border-light: #B0E5DF;
  --color-border-medium: rgba(0, 68, 137, 0.2);
  --color-bg-main: #f5fbff;
}

.t-limini-zero {
  --color-primary: #7d7d7d;
  --color-primary-dark: #414141;
  --color-bg-dark: #414141;
  --color-bg-main: #f9f9f9;
  --color-bg-sub: #ffffff;
  --color-border-light: #bfbfbf;
  --color-text-main: #414141;
  --color-text-sub: #7d7d7d;
}

/* foundation.scss (基盤となるリセット・ベーススタイル) */
/* --- 1. ボックスモデルの統一 (はみ出し防止の最重要設定) --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- 2. ブラウザデフォルトのリセット --- */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  /* 横スクロールの物理的禁止 */
  -webkit-text-size-adjust: 100%;
  /* iOSでの勝手な文字サイズ変更を防止 */
}

body {
  font-family: var(--font-family-noto);
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  line-height: var(--line-height-base);
  font-size: var(--font-size-base);
}

/* --- 3. 画像のレスポンシブ化 --- */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* --- 4. 共通レイアウトコンテナ --- */
.l-container {
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
  position: relative;
}

/* --- 5. ユーティリティ --- */
@media (max-width: 767px) {
  .u-hidden-sp {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .u-hidden-pc {
    display: none !important;
  }
}